webpack 优化

resolve配置

resolve: {
  alias: {
    // 减少依赖包所在文件的查询时间
    react: path.resolve(__dirname, "../../node_modules/react/dist/react.min.js"),
     ...
  }，
  // 与alias类似，减少文件查找时间
  modules:['./src/components'],
  // 减少文件查找类别
   extensions: ['.js', '.json']
}

DLL，预打包

// webpack.dll.js 单独预打包，并且生成json文件
// json文件中包含“./node_modules/react/cjs/react.production.min.js”：{ id: 3, ...... }
// 模块id等信息
  entry: {
    library: ["react",  "react-dom"]
  },
  output: {
    filename: "[name]_[hash].dll.js",  // library.dll.js
    path: path.join(process.cwd(), "dll/library"),
    library: '[name]', // window.react == react.js
  },
  plugins: [
    new webpack.DllPlugin({ // 生成对应的json文件
      name: "[name]",
      path: path.join(process.cwd(), "dll/library/[name].json"),
    })
  ]
// webpack.base.js 
// webpack.DllReferencePlugin根据之前打包的json文件进行引用
plugins: [
    new webpack.DllReferencePlugin({
       manifest: path.join(process.cwd(), "/dll/library/library.json")
    }),
]

缓存的使用

• css cache缓存

      {
        test: /\.js$/,
        use: [
          'babel-loader?cacheDirectory=true', // 二次构建缓存开启提升40%
          'eslint-loader'
        ],
      },

• plugins 模块缓存

const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
 [
new HardSourceWebpackPlugin({}) 
]

并发处理

• js的并发处理loader，webpack之前happy-pack,webpack4自带thread-loader

      {
        test: /.js$/,
        use: [
          'thread-loader'
        ],
      },

• css的并发处理plugin

const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
    new MiniCssExtractPlugin({
      filename: "[name]_[contenthash:8].css",////都提到build目录下的css目录中
      chunkFilename: "[id][contenthash:8].css"
    }),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require("cssnano"), // css 并发处理器
    }),

splitChunks分包

  optimization: {
    splitChunks: {
      // async：require.ensure()/import.then()引入的库进行分离（默认），
      // initial： 同步引入的库进行分离，
      //  all：所有引入的库进行分离（推荐）
      chunks: 'all',
      minSize: 0, // 抽离的公共包最小的大小，单位字节
    maxSize: 0, // 最大的大小
    minChunks: 1, // 资源使用的次数(在多个页面使用到)， 大于1， 最小使用次数
    maxAsyncRequests: 5, // 并发请求的数量
    maxInitialRequests: 3, // 入口文件做代码分割最多能分成3个js文件
    automaticNameDelimiter: '~', // 文件生成时的连接符
    automaticNameMaxLength: 30, // 自动自动命名最大长度
      name: true, //让cacheGroups里设置的名字有效
      cacheGroups: { //当打包同步代码时,上面的参数生效
        verder: {
          name: "verder",
          test: /[\\/]node_modules[\\/]/, //检测引入的库是否在node_modlues目录下的
          priority: -10, //值越大,优先级越高.模块先打包到优先级高的组里
          // filename: 'vendors.js'//把所有的库都打包到一个叫vendors.js的文件里
        },
        commonUtils: {
          name: "commonUtils",
          test: /[\\/]src[\\/]utils[\\/]/,
          priority: -9,
        },
      }
    },
    minimizer: [
      new TerserPlugin({
        parallel: true,
        cache: true,
      })
    ]
  },

缩减包的体积/其它

• 动态兼容， polyfill-service，针对浏览器ua下发不同的polyfill文件
• 图片的压缩算法的原理：tinyPng: 将24位png转化为更小索引的8位图片，去除非必要的matadata信息
• devtool的选择：
  --------------使用————————————————
• eval 定位webpack后的代码
• cheap-eval-source-map 进过loader转化后的代码
• cheap-module-eval-source-map 源代码只能看行
• eval-source-map 源代码
• cheap-source-map loader后无列信息源代码
• cheap-module-source-map 后无列信息源代码
• source-map 源代码
• inline-source-map 源代码
• hidden-source-map 源代码,注释的形式和原文件打包
  sourcemap的主要原理：

{
　　version : 3,                          // 版本
　　file: "out.js",                       // 转换后文件目录
　　sourceRoot : "",                      // 转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。
　　sources: ["foo.js", "bar.js"],        // 转换前的文件。该项是一个数组，表示可能存在多个文件合并
　　names: ["src", "maps", "are", "fun"], // 转换前的变量名称
　　mappings: "AAgBC,SAAQ,CAAEA"          // 记录位置信息的字符窜
}
- 主要原理在于mapping是如何实现的
- 位置对应原理： 
  五位的字符长度（如上述mapping中: “AAgBC”）
  [“转换后的代码的第几列”，“哪个source文件”，“转换之前第几行”，“转换之后第几列”，“属于names中的哪个变量”]
- 每一位上采用的是VLQ编码
- VLQ编码流程： 
  “16”（变量） --> 
  "10000"(二进制) --> 
  "100000"(>0补0) --> 
  "00001"+"00000"(按5位分割) --> 
  "100000"+"00000"(反转)  --> 
  “gB”(进行base64编码)【得到“16”的最后编码结果】

按需加载

使用import().then()或者require().ensure()
react下的异步组件

import React, { lazy, Suspense } from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}