前端开发开发环境系列文章的 github 在这,如果您在看的过程中发现了什么有余和谬误，感谢您能指出！

作为一个前端开发，Webpack肯定不生疏，在前端这一畛域，大多数的我的项目应该都是用webpack作为一个模块打包工具。然而当我的项目的规模变大后，应该都或多或少的遇到了性能相干的问题。

而以webpack作为工具，则能够将性能分为两种：

  1. 构建速度
  2. 页面加载速度

以这两个为目标，对咱们的我的项目进行优化。

尽量应用高版本的webpack和node

Webpack和Node每次一大版本的更新都会随同着性能优化，这是最间接显著的

speed-measure-webpack-plugin

该插件的作用就是剖析loader和plugin的打包速度，针对信息定制优化计划

装置yarn add speed-measure-webpack-plugin -D

webpack.config.js

const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin')const swp = new SpeedMeasureWebpackPlugin()module.exports = swp.wrap(yourConfig);

webpack-bundle-analyzer

剖析打包模块体积

多线程进行TypeScript的类型查看

在我的项目中应用了ts-loader后，我的项目中ts文件的类型查看会十分的耗时。所以咱们通过ts-loader的配置敞开类型查看，并是应用fork-ts-checker-webpack-plugin在别的线程查看。这会大大减少webpack的编译工夫。

yarn add fork-ts-checker-webpack-plugin -D

module.exports = {    module: {        rules: [            {                test: /\.ts(x)?$/,                use: [                {                    loader: 'ts-loader',                    options: {                    // 敞开类型查看，即只进行转译                    // 类型查看交给 fork-ts-checker-webpack-plugin 在别的的线程中做                    transpileOnly: true,                    },                },                ],                exclude: /node_modules/,            },        ]    },    plugins: [        new ForkTsCheckerWebpackPlugin(),    ]}

预编译资源模块（该计划在webpack4之后，优化成果就不是很显著了）

应用webpack官网的DllPlugin进行分包

  • 思路： 将一些根底且比较稳定的包打包成一个文件，如react、react-dom、redux、react-redux
  • 办法： DLLPlugin分包，DllReferencePlugin对manifest.json援用。援用manifest.json会主动关联DllPulugin中的包

这须要一个独自的 webpack.dll.js 配置文件

const path = require('path');const webpack = require('webpack');module.exports = {  mode: 'development',  resolve: {    extensions: ['.js', '.jsx', '.json', '.less', '.css'],    modules: [__dirname, 'node_modules']  },  entry: {    // 制订须要拆散的包    react: ['react', 'react-dom', 'redux', 'react-redux'],  },  output: {    filename: '[name].dll.js',    path: path.join(__dirname, 'dll/'),    library: '[name]_[fullhash]',  },  plugins: [    new webpack.DllPlugin({      name: '[name]_[fullhash]',      path: path.join(__dirname, 'dll', 'manifest.json'),    }),  ],};

在根目录创立一个dll目录，而后运行webpack --config webpack.dll.js，将一些根底包提前编译进去，dll目录下会有 manifest.json react.dll.js两个文件

而后在次要的webpack配置中援用

须要装置一个插件将dll文件导入到html中
yarn add add-asset-html-webpack-plugin -D

module.exports = {    plugins: [        // 将预编译的公共库导入到html中        new AddAssetHtmlPlugin({ filepath: require.resolve('./dll/react.dll.js') }),        // webpack4之后dllPlugin对性能的晋升就不大了        new webpack.DllReferencePlugin({            context: __dirname,            // manifest.json就是对咱们要引入包的形容            manifest: require('./dll/manifest.json'),        }),    ],}

多过程并行压缩js代码, css代码压缩

module.exports = {  optimization: {    minimize: true,    minimizer: [        // js压缩        new TerserPlugin({            parallel: 4 // 默认为以后电脑cpu的两倍 os.cpus().length - 1        })        // css压缩        new CssMinimizerPlugin(),    ]  }}

放大构建指标

目标：尽可能的少构建模块

比方 babel-loader 不解析 node_modules

优化resolve.modules 配置（缩小模块搜寻层级）

优化resolve.mainFields配置

优化resolve.extensions配置

正当应用alias

应用tree shaking擦除无用的js和css

webpack中，只有应用的是es6的语法，默认都会对js代码进行tree shaking

然而css代码并不能tree shaking，所以须要应用到 purgecss-webpack-plugin

装置yarn add purgecss-webpack-plugin@4.1.3 -D.

为什么要装置4.1.3版本呢？因为我应用的是webpack5，这个最新版本5.0.0在webpakc中有一个Constructor Error的谬误，具体请看

const path = require('path');const glob = require('glob');const PATHS = {  src: path.join(__dirname, 'src'),};module.exports = {    plugins: [        new PurgecssPlugin({            paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),        }),    ]}

对图片进行压缩

首先装置对应插件
yarn add image-minimizer-webpack-plugin @squoosh/lib -D

在这个装置的过程中可能会呈现谬误(我是在应用 imagemin 时呈现的，可能和@squoosh/lib无关)，能够依照以下办法逐渐排除（我的是在mac中呈现的，如果是在别的环境，就依照别的环境的命令装置）

  • node lib/install.js error: brew install automake autoconf libtool https://github.com/imagemin/imagemin-mozjpeg/issues/11
  • Permission denied @ apply2files: sudo chown -R ${LOGNAME}:staff /usr/local/lib/node_modules https://stackoverflow.com/questions/61899041/macos-permission-denied-apply2files-usr-local-lib-node-modules-expo-cli-n
  • Build error: no nasm (Netwide Assembler) found: brew install nasm

而后就是在生产构建流程中退出以下配置

module.exports = {  optimization: {    minimizer: [      //...      new ImageMinimizerPlugin({        minimizer: {          implementation: ImageMinimizerPlugin.squooshMinify,          options: {            // Your options for `squoosh`            // The document where you can find options is https://github.com/webpack-contrib/image-minimizer-webpack-plugin#optimize-with-squoosh          },        },      }),    ]  }}

对我的项目进行分包 更多细节能够看这篇文章

根本分包策略：

  1. 公共的库是肯定要尽量拆的。
  2. 公共的库尽量做到按需加载，这也是优化首屏加载须要留神的。
  3. 分包不能太细，0KB 至 10 KB 的包是极小的包，该当思考合并。10 KB 至 100 KB 的包是小包，比拟适合；100 KB 至 200 KB 的包只能是比拟外围重要的包，须要重点关注，大于 200KB 的包就须要思考拆包了。当然，也不排除一些非凡状况。
module.exports = {    optimization: {    runtimeChunk: 'single',    splitChunks: {      // chunks: 'async',      // minSize: 20000,      // minRemainingSize: 0,      // minChunks: 1,      // maxAsyncRequests: 30,      // maxInitialRequests: 30,      // enforceSizeThreshold: 50000,      cacheGroups: {        // 提取公共资源        vendor: {          test: /[\\/]node_modules[\\/]_?react(.*)/,          name: 'vendors-react-bucket',          priority: 20,          chunks: 'all',        },      },    },  },}

应用externals将第三方库排除在打包的bundle外

将一些比较稳定的，罕用的第三方库拆散出打包流程中，应用cdn进行加载，能很无效的升高bundle的体积，放慢首屏渲染工夫，冲破浏览器对同一域名下资源并发申请的限度

module.exports = {  // 应用cdn来减少浏览器针对同一域名的并发限度，应用externals将这些库排除在bundle外  externals: {    react: 'react',    'react-dom': {      commonjs: 'react-dom',      amd: 'react-dom',      root: '_', // 指向全局变量    },    redux: 'redux',    'react-redux': 'react-redux',    'react-router': 'react-router',    'react-router-dom': 'react-router-dom',  },}

其余文章

  • 开发一个react+ ts+webpack的前端开发环境(一)------根底环境搭建
  • 开发一个react+ ts+webpack的前端开发环境(二)------配置eslint、prettier、husky等代码标准查看工具