webpack 性能优化-KLCode

运行时的优化

source map 文件
测试代码和测试工具
Eslint 终端报错会阻碍开发调试进程，可禁用
按需加载第三方库或插件
配置插件，减少工作量，提升效率

source map 文件

在开发环境中会需要source map 文件进行调试，而在生产环境不需要

生产环境中，可以禁止生成source map 文件
开发环境中，可以使用轻量级的 source map 类型，如 eval-cheap-module-source-map

实现：

.env.prod 文件

GENERATE_SOURCEMAP=false

config-overrides.js

const { override} = require('customize-cra')
const isProd = process.env.NODE_ENV === 'production'
module.exports = override(
   devtool: isProd ? false : 'eval-cheap-module-source-map'
)

测试代码和测试工具

生产环境不需要测试代码，可以禁用Eslint插件

实现：.env.prod 文件设置 DISABLE_ESLINT_PLUGIN=true

Eslint 终端报错会阻碍开发调试进程，可禁用

实现：.env.development 文件设置 ESLINT_NO_DEV_ERRORS=true

按需加载第三方库或插件

在引入第三方工具库时，考虑是否可以按需加载，减少打包体积，如lodash，antd，element-ui等
在引入插件时，考虑生产环境是否用到插件，添加判断环境的逻辑。如:

const { override, addPostcssPlugins} = require('customize-cra')
const isProd = process.env.NODE_ENV === 'production'

module.exports = override(
  addPostcssPlugins([
    autoprefixer({
      overrideBrowserslist: ['last 2 versions', '>1%', 'ios 7'],
    }),
  ]),
)

增加 postcss.config.js 自动为 css 添加不同浏览器的标识前缀

const { override, addPostcssPlugins} = require('customize-cra')
const autoprefixer = require('autoprefixer');

module.exports = override(
  addPostcssPlugins([
    autoprefixer({
      overrideBrowserslist: ['last 2 versions', '>1%', 'ios 7'],
    }),
  ]),
)

打包时的优化

去除不需要提前加载的 js 文件
按需加载依赖库
使用webpack5 的 cache 持续化缓存，提升构建性能

webpack-bundle-analyzer 优化

https://juejin.cn/post/7035951233907032077

按需加载依赖库

查看依赖是否有重复引入：yarn list 依赖名
是否有相似的体积更小的第三方库，选用体积小的
是否要引入第三方库，权衡是否有必要全部引入？

使用webpack5 的 cache 持续化缓存，提升构建性能

babel-laoder 缓存（react脚手架默认开启）

module.exports = { 
    // ... 
    module: { 
        rules: [{ 
            test: /.m?js$/, 
            loader: 'babel-loader', 
            options: { 
                cacheDirectory: true, 
            }, 
        }] 
    }, 
    // ... 
};

eslint-loader 缓存（react脚手架默认开启）

自定义拆包

采用多个导入的单个入口起点

多个导入的单个入口起点：指在一个入口文件中，通过多个 import 语句导入多个模块，然后将这些模块打包到同一个文件中。

这种方式可以避免使用多个入口起点，从而更好地控制代码分割，提高应用程序的性能

防止重复：使用入口依赖或者 splitChunks去重和分离 chunk
splitChunks 对资源进行分块，提取重复使用的chunk
loader 指定 include，缩写解析范围
优化 resolve 配置，配置别名和常用后缀名，加快搜索

TreeShaking

插件压缩代码

https://juejin.cn/post/6844904198023168013

https://juejin.cn/post/6844904199394689032

目录CONTENT

webpack 性能优化