初探 Webpack 性能优化

发表于

Webpack是现在主流的功能强大的模块化打包工具，在使用Webpack时，如果不注意性能优化，有非常大的可能会产生性能问题，比如开发时打包构建速度慢、开发调试时的重复性工作等。本文将会讲解一些基本的Webpack性能优化问题。

一、优化构建速度

  1. 设置 resolve.modules:[path.resolve(__dirname, 'node_modules')]避免层层查找。

    resolve.modules告诉 webpack 去哪些目录下寻找第三方模块，默认值为['node_modules']，会依次查找./node_modules 、../node_modules、 ../../node_modules。

  2. 合理配置resolve.extensions，减少文件查找。

    默认值：extensions:['.js', '.json'] , 当导入语句没带文件后缀时，Webpack会根据extensions定义的后缀列表进行文件查找，所以：

    • 列表值尽量少
    • 频率高的文件类型的后缀写在前面
    • 源码中的导入语句尽可能的写上文件后缀，如import store from './index'要写成import store from './index.js'

二、压缩文件体积

  1. 区分环境–减小生产环境代码体积

    在webpack4 增加了mode模式配置 在浏览器环境下指定了 process.env.NODE_ENV 的值，默认是development，但node环境中还是需要cross-env来设置。
    mode 是 webpack 4 中新增加的参数选项，其有两个可选值：production 和 development。mode 不可缺省，需要二选一。

    在项目目录中添加webpack配置文件

    • webpack.base.config.js 保存webpack基础通用的配置的文件
    • webpack.dev.config.js 保存webpack开发环境配置的文件
    • webpack.prod.config.js 保存webpack生成环境配置的文件
    • webpack.config.js webpack执行配置文件, 保存相应环境的配置和webpack基础配置文件合并后的配置

  2. 压缩JS

    Webpack内置UglifyJS插件、ParallelUglifyPlugin

    会分析JS代码语法树，理解代码的含义，从而做到去掉无效代码、去掉日志输入代码、缩短变量名等优化。常用配置参数如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    const UglifyJSPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
    //...
    plugins: [
        new UglifyJSPlugin({
            compress: {
                warnings: false,  //删除无用代码时不输出警告
                drop_console: true,  //删除所有console语句，可以兼容IE
                collapse_vars: true,  //内嵌已定义但只使用一次的变量
                reduce_vars: true,  //提取使用多次但没定义的静态值到变量
            },
            output: {
                beautify: false, //最紧凑的输出，不保留空格和制表符
                comments: false, //删除所有注释
            }
        })
    ]

  3. 使用Tree Shaking剔除 JS 中的dead-code

    tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。

    它正常工作的前提是代码必须采用ES6的模块化语法，因为ES6模块化语法是静态的（在导入、导出语句中的路径必须是静态字符串，且不能放入其他代码块中）。

  4. 使用webpack-bundle-analyzer

    可以使用 webpack-bundle-analyzer 来分析 Webpack 生成的包体组成并且以 可视化 的方式反馈给开发者。

    使用npm安装该插件:

    npm install --save-dev webpack-bundle-analyzer

    然后我们需要修改webpack.config.js来引入该插件：

    1
    2
    3
    4
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    // ...
    plugins: [new BundleAnalyzerPlugin()]
    // ...

    执行webpack-dev-server，浏览器将会自动在localhost:8888打开分析页面。