前端性能优化-webpack构建优化

一、webpack的优化配置

1、Tree-shaking

移除 JavaScript 上下文中的未引用代码(dead-code)
基于ES6 import export
package.json中配置sideEffects，过滤 Tree-shaking文件
注意babel默认配置的影响，保留es6模块化语法

2、js压缩

webpack4后引入uglifyjs-webpack-plugin
支持es6替换为terser-webpack-plugin(生产模式默认使用的插件)
减小js文件体积

3、作用域提升

分析调用依赖，相同的依赖合并，代码体积减小
提高执行效率
注意babel默认配置的影响，保留es6模块化语法

4、Babel7优化配置

在需要的地方引入polyfill(js新语法兼容处理)
辅助函数的按需引入,@babel/plugin-transform-runtime插件
根据目标浏览器按需转换代码.配置 @babel/preset-env -> targets -> browsers

二、webpack的依赖优化

1、noParse 不解析

提高构建速度
直接通知webpack不解析较大的库
被忽略的库不能有import,require,define的引入方式
配置

// webpack.config.js
module: {
     noParse: /lodash/ // lodash是被忽略的库
}

2、DLLPlugin 把经常重复使用的库，提取出来，变成一种引用的方式,这样就不用每次都构建这些库，加速构建过程。
避免打包时对不变的库重复构建，比如 react和vue相关
提高构建速度
配置

// webpack.dll.config.js 打包配置
  const path = require("path");
  const webpack = require("webpack");
  module.exports = {
       mode: "production",
       entry: {
           react: ["react", "react-dom"] // 库
       },
       output: {
           filename: "[name].dll.js", // 文件名字
           path: path.resolve(__dirname, "dll"), // 输出文件路径
           library: "[name]" // 生成库的名称
       },
       plugins: [
         new webpack.DLLPlugin({
    name: "[name]",
    path: path.resolve(__dirname, "dll/[name].manifest.json")
         })
       ]
  }
  // package.json 添加scripts脚本
  "dll-build": "NODE_ENV=production webpack --config webpack.dll.config.js"
  // 执行打包命令 根目录会生成 dll 文件夹，里边有两个文件 react.dll.js react.manifest.json
  npm run dll-build
  // webpack.config.js 配置DLLReferencePlugin插件 引用刚才的打包文件库
  new DLLReferencePlugin(
     manifest: require(`${__dirname}/dll/react.manifest.json`)
  )

三、基于webpack的代码拆分

代码拆分做什么
把单个bundle文件拆分成若干个小bundles/chunks
缩短首屏加载时间

splitChunks提取共有代码，拆分业务代码与第三方库

// webpack.config.js
  
  const path = require("path");
  const webpack = require("webpack");
  module.exports = {
      optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    name: 'vendor',
                    test: /[\\/]node_modules[\\/]/,
                    minSize: 0,
                    minChunks: 1,
                    priority: 10,
                    chunks: 'initial'
                },
                common: {
                    name: 'common',
                    test: /[\\/]src[\\/]/,
                    minSize: 0,
                    minChunks: 2,
                    chunks: 'all'
                }
            }
        }
    }
  }

四、webpack的资源压缩

1、Terser压缩JS https://webpack.js.org/plugins/terser-webpack-plugin/#terseroptions
2、mini-css-extract-plugin压缩CSS https://webpack.js.org/plugins/mini-css-extract-plugin/#root
3、HtmlWebpackPlugin压缩HTML https://webpack.js.org/plugins/html-webpack-plugin/#root

五、基于webpack的资源持久化缓存

浏览器加载一个资源时，会缓存资源文件，如果文件地址没有变化，缓存机制生效，会优先从缓存中加载资源文件，而不是从服务端重新加载。

1、持久化缓存方案
每个打包的资源文件有唯一的hash值
修改后只有受影响的文件hash变化
充分利用浏览器缓存

// webpack.config.js
  module.exports = {
    output: {
        path: `${__dirname}/build`,
        filename: '[name].[hash].bundle.js', // 非按需加载 文件名 名字+hash
        chunkFilename: '[name].[chunkhash:8].bundle.js' // 拆包的文件（按需加载） 名字+hash
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css', // 根据内容生成hash值
            chunkFilename: '[id].[contenthash:8].css'
        })
    ],
};

六、基于webpack的应用大小监测与分析

1、Stats分析与可视化图 https://github.com/alexkuz/webpack-chart
2、source-map-explorer 体积分析 https://www.npmjs.com/package/source-map-explorer
3、webpack-bundle-analyzer体积分析 https://www.npmjs.com/package/webpack-bundle-analyzer
4、speed-measure-webpack-plugin 速度分析 https://www.npmjs.com/package/speed-measure-webpack-plugin