一、缩小文件搜索范围

1、优化loader的配置

由于loader对文件的转换操作很耗时，我们需要尽可能少的文件被loader处理
一般配置有两种：

  • include：处理包含的文件

  • exclude：去除不处理的文件

    配置

    1. module.exports = {
    2.   module: {
    3.     rules: [
    4.       {
    5.       test: /\.js$/,
    6.       exclude: /node_modules/, // node_modules文件夹下的js文件不需要用loader处理
    7.       loader: "babel-loader",
    8.       options: {
    9.         presets: [["@babel/preset-env"]]
    10.       },
    11.       include: path.resolve(__dirname, 'src') // loader只处理src目录下的js文件
    12.     }
    13.   ]
    14. }
    15. }

    优化指标

  • 打包时间减少了

    • 1056ms =》815ms

      2、优化resolve.modules配置

      resolve.modules用于配置webpack去哪些目录下寻找第三方模块
      resolve.modules 的默认值是 ['node_modules']，含义是先去当前目录下的 ./node_modules 目录下去找想找的模块，如果没找到就去上一级目录 ../node_modules 中找，再没有就去 ../../node_modules 中找，以此类推，这和 Node.js 的模块寻找机制很相似。
      当安装的第三方模块都放在项目根目录下的 ./node_modules 目录下时，没有必要按照默认的方式去一层层的寻找，可以指明存放第三方模块的绝对路径，以减少寻找。

      配置

      1. module.exports = {
      2. resolve: {
      3. modules: [path.resolve(__dirname, 'node_modules')]
      4. }
      5. }

  • 使用绝对路径指明第三方模块存放的位置，减少搜索步骤

  • 其中__dirname 表示当前工作目录，也就是项目根目录

    优化指标

  • 打包时间减少了

    3、resolve.mainFields配置

    resolve.mainFields 用于配置第三方模块使用哪个入口文件。
    如果有明确的第三方模块入口文件，可以设置尽量少的搜索

    配置

    1. module.exports = {
    2.   resolve: {
    3.   mainFields: ['main']
    4. }
    5. }

    该优化方案需要注意：需要考虑到所有运行时依赖的第三方模块的入口文件描述字段，就算有一个模块搞错了都可能会造成构建出的代码无法正常运行。

    优化指标

  • 打包时间减少了

    4、优化resolve.alias配置

    resolve.alias 配置项通过别名来把原导入路径映射成一个新的导入路径。
    在实战项目中为了解析某个东西，需要将某个某个东西指定文件解析

    配置

    1. module.exports = {
    2. resolve: {
    3.   // 使用 alias 把导入 react 的语句换成直接使用单独完整的 react.min.js 文件，
    4.   // 减少耗时的递归解析操作
    5.   alias: {
    6.     'react': path.resolve(__dirname, './node_modules/react/dist/react.min.js'), // react15
    7.     // 'react': path.resolve(__dirname, './node_modules/react/umd/react.production.min.js'), // react16
    8.   }
    9. },
    10. };

    优化指标

  • 打包时间减少了

    5、优化resolve.extensions配置

    配置

    在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试询问文件是否存在。
    resolve.extensions 用于配置在尝试过程中用到的后缀列表，默认是：

    1. module.exports = {
    2. resolve: {
    3.   // 尽可能的减少后缀尝试的可能性
    4.   extensions: ['js'],
    5. },
    6. };

    6、优化module.noParse配置

    忽略对一些没有采用模块化的库文件进行递归解析处理。
    “不去解析jquery中的依赖库”

    配置

    1. module.exports = {
    2. module: {
    3.   // 独完整的 `react.min.js` 文件就没有采用模块化，忽略对 `react.min.js` 文件的递归解析处理
    4.   noParse: [/react\.min\.js$/],
    5. },
    6. };

    7、new webpack.IgnorePlugin

    配置

    ```javascript new webpack.IgnorePlugin({ checkResource(resource) { // do something with resource return true | false; }, });

  1. <a name="mQoP4"></a>
  2. ## 二、使用DllPlugin
  3. 动态链接库<br />可以先把react 等库打包到dll中，下次就不会重新打包了
  4. ```javascript
  6. output: {
  7.   filename: 'bundle.js',
  8.   path: path.resolve(__dirname, '')
  9. },
  10. plugins: [
  11.   new webpack.DllReferencePlugin({
  12.     manifest: path.resolve(__dirname, 'dist', 'manifest.json')
  13.   }),
  14. ]

三、多线程/多实例构建

HappyPack不维护了，
4之后的版本使用：thread-loader

  1. module.exports = {
  2.   module: {
  3.     rules: [
  4.       {
  5.         test: /\.js$/,
  6.         include: path.resolve("src"),
  7.         use: [
  8.           "thread-loader",
  9.           "expensive-loader"
  10.         ]
  11.       }
  12.     ]
  13.   }
  14. }

有缺点，使用需谨慎，请仅在耗时的 loader 上使用。
把这个 loader 放置在其他 loader 之前， 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行
在 worker 池(worker pool)中运行的 loader 是受到限制的。例如：

  • 这些 loader 不能产生新的文件。
  • 这些 loader 不能使用定制的 loader API（也就是说，通过插件）。

  • 这些 loader 无法获取 webpack 的选项设置。

    优化指标

  • 打包速度快了

    四、并行压缩js代码

    配置

    1. npm i -D webpack-parallel-uglify-plugin

    ```javascript const ParalleUglifyPlugin = require(‘webpack-parallel-uglify-plugin’);

module.exports = { plugins: [ // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码 new ParalleUglifyPlugin({ uglifyJs:{ output: { beautify:false, // 最紧凑的输出 comments:true, // 删除所有的注释 }, compress:{ warnings: false, //在UglifyJs删除没有用到的代码时不输出警告 drop_console:true, // 删除所有的 console 语句，可以兼容ie浏览器 collapse_vars:true, // 内嵌定义了但是只用到一次的变量 reduce_vars:true // 提取出出现多次但是没有定义成变量去引用的静态值 } } }) ] }

  1. <a name="BvJxJ"></a>
  2. #### 优化指标
  4. - 输出文件变小了
  5. <a name="P1ENL"></a>
  6. ## 五、使用自动刷新
  7. <a name="kZAmP"></a>
  8. ### 文件监听
  9. ```javascript
  10. module.export = {
  11.   // 只有在开启监听模式时，watchOptions 才有意义
  12.   // 默认为 false，也就是不开启
  13.   watch: true,
  14.   // 监听模式运行时的参数
  15.   // 在开启监听模式时，才有意义
  16.   watchOptions: {
  17.     // 不监听的文件或文件夹，支持正则匹配
  18.     // 默认为空
  19.     ignored: /node_modules/,
  20.     // 监听到变化发生后会等300ms再去执行动作，防止文件更新太快导致重新编译频率太高
  21.     // 默认为 300ms
  22.     aggregateTimeout: 300,
  23.     // 判断文件是否发生变化是通过不停的去询问系统指定文件有没有变化实现的
  24.     // 默认每隔1000毫秒询问一次
  25.     poll: 1000
  26.   }
  27. }

文件监听工作原理

优化文件监听性能

  1. module.export = {
  2.   watchOptions: {
  3.     // 不监听的 node_modules 目录下的文件
  4.     ignored: /node_modules/,
  5.   }
  6. }

自动刷新浏览器

监听到文件更新后的下一步是去刷新浏览器，webpack 模块负责监听文件，webpack-dev-server 模块则负责刷新浏览器。

自动刷新浏览器优化

关闭inline

六、开启热更新

  1. const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
  3. module.exports = {
  4.   entry:{
  5.     // 为每个入口都注入代理客户端
  6.     main:['webpack-dev-server/client?http://localhost:8080/', 'webpack/hot/dev-server','./src/main.js'],
  7.   },
  8.   plugins: [
  9.     // 该插件的作用就是实现模块热替换，实际上当启动时带上 `--hot` 参数，会注入该插件，生成 .hot-update.json 文件。
  10.     new HotModuleReplacementPlugin(),
  11.   ],
  12.   devServer:{
  13.     // 告诉 DevServer 要开启模块热替换模式
  14.     hot: true,      
  15.   }  
  16. }
  1. devServer: {
  2.     clientLogLevel: "none", // 可选的值：none，error，waring 或者 info（默认值）
  3.     hot: true,              // 启用webpack的模块替换热更新特性，这个需要配合“webpack.HotModuleReplacementPlugin”插件
  4.     contentBase: path.join(__dirname, "dist"),     // 告诉服务器从哪里提供内容，默认情况下使用当前工作目录
  5.     compress: true,         // 一切服务都启用gzip 压缩：
  6.     host: "0.0.0.0",        // 指定使用一个 host。默认是 localhost。如果你希望服务器外部可访问，指定如下：
  7.     port: 8080,             // 端口
  8.     open: true,             // 是否打开浏览器
  9.     overlay: {              // 出现错误或者警告的时候，是否覆盖页面线上错误信息
  10.         warnings: true,
  11.         errors: true
  12.     },
  13.     publicPath: "/",        // 此路径下的打包文件可在浏览器中访问
  14.     proxy: {                // 设置代理
  15.         "/api": {           // 访问api开头的请求，会跳到下面的路径
  16.           target: "http://localhost:3000",
  17.           pathRewrite: {"^/api" : ""}
  18.         }
  19.     },
  20.     quiet: true,             // 启用 quiet 后，除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见。
  21.     watchOptions: {          // 与监视文件相关的控制选项。
  22.         poll: true,          // 主动去拉取文件， webpack 使用文件系统获取文件改动的通知，
  23.         ignored: /node_modules/,    // 忽略监听
  24.         aggregateTimeout: 300,    // 默认值，当第一个文件更改，会在重新构建钱增加延迟，这就是事件防抖
  25.     }
  26. },
  1. plugins: [
  2.     new webpack.HotModuleReplacementPlugin(),    // 替换插件
  3.     new webpack.NamedModulesPlugin()             // 更容易查看patch的依赖 
  4. ]

七、区分环境

八、代码压缩

压缩js和css

  1. const uglify = require('uglifyjs-webpack-plugin');
  2. plugins: [
  3.     new uglify()
  4. ]
  1. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  2. const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
  4. rules: [
  5.     {
  6.     test: /\.css$/,
  7.     // css-loader 用来解析处理css文件中的url路径
  8.     // style-loader 可以把css文件变成style标签插入到header中
  9.     // 多个loader是有顺序要求的，从右往左写，因为转换的时候是从右往左转换
  10.     // loader: ['style-loader', 'css-loader']
  11.     use: [
  12.       //添加loader,用于生产模式，不能有 style-loader 
  13.       {
  14.         loader:MiniCssExtractPlugin.loader,
  15.         options:{
  16.           publicPath:'../'
  17.         }
  18.       },
  19.       "css-loader"
  20.     ]
  21.   }
  22. ]
  24. plugins: [
  25.   // 将css抽离出来
  26.     new MiniCssExtractPlugin({
  27.     filename: "css/[name].css",
  28.     chunkFilename: "[id].css"
  29.   }),
  30.   // 压缩css代码
  31.   new OptimizeCSSAssetsPlugin({}),
  32. ]

优化指标

  • 代码小了

  • 打包速度快了

    九、CDN加速

    十、Tree Shaking

    Tree Shaking 可以用来剔除 JavaScript 中用不上的死代码。

  • purgecess-webpack-plugin和mini-css-extract-plugin配合使用

  • 打包过程中检测工程中没有引用过的模块进行标记，在资源压缩时将他们从最终的bundle中去掉（只能对ES6module生效）开发中尽可能使用Es6 Module的模块，提高tree shaking的效率

  • 禁用babel-loader的模块依赖解析，否则webpack接收到的就都是转换过的，无法进行tree shake

    十一、开启Scope hoisting

    Scope Hoisting 可以让 Webpack 打包出来的代码文件更小、运行的更快， 它又译作 “作用域提升”

    好处：

  • 代码体积更小，因为函数申明语句会产生大量代码；

  • 代码在运行时因为创建的函数作用域更少了，内存开销也随之变小。

    原理

    分析出模块之间的依赖关系，尽可能的把打散的模块合并到一个函数中去，但前提是不能造成代码冗余。 因此只有那些被引用了一次的模块才能被合并。
    由于 Scope Hoisting 需要分析出模块之间的依赖关系，因此源码必须采用 ES6 模块化语句，不然它将无法生效。

    配置

    要在 Webpack 中使用 Scope Hoisting 非常简单，因为这是 Webpack 内置的功能，只需要配置一个插件 ```javascript const ModuleConcatenationPlugin = require(‘webpack/lib/optimize/ModuleConcatenationPlugin’);

module.exports = { plugins: [ // 开启 Scope Hoisting new ModuleConcatenationPlugin(), ], // 为了充分发挥scope hoisting的作用， // 需要配置mainFields对第三方模块优先采用jsnext:main中指向的ES6模块化语法 resolve: { // 针对 Npm 中的第三方模块优先采用 jsnext:main 中指向的 ES6 模块化语法的文件 mainFields: [‘jsnext:main’, ‘browser’, ‘main’] }, };

  1. <a name="VusEz"></a>
  2. ## 十二、按需加载
  3. ```javascript
  4. '@babel/plugin-syntax-dynamic-import'

十三、提取公共资源

十四、图片压缩

  • 使用基于Node库的imagemin（很多定制项、可以处理多种图片格式）

  • 配置image-webpack-loader

    十五、动态Polyfill

  • 建议采用polyfill-service只给用户返回需要的polyfill

  • @babel-parset-env中通过useBuiltlins:usage参数来动态加载polyfill

    十六、分析打包

    speed-measure-webpack-plugin简称：SMP，分析出webpack打包过程中Loader、Plugin的耗时，有助于构建过程中的性能瓶颈。
    官方可视化分析工具
    webpack-bundle-analyzer是另一个可视化分析工具， 它虽然没有官方那样有那么多功能，但比官方的要更加直观。

    十七、代码抽离

    1. module.exports = {
    2. optimization: {
    3.   splitChunks: { // 分割代码块
    4.     cacheGroups: { // 缓存组
    5.       common: { // 公共的模块
    6.         chunks: 'initial',
    7.         minSize: 0,
    8.         minChunks: 2
    9.       },
    10.       vendor: {
    11.         priority: 1,
    12.         test: /node_modules/,
    13.         chunks: 'initial',
    14.         minSize: 0,
    15.         minChunks: 2
    16.       }
    17.     }
    18.   }
    19. }
    20. }