webpack 优化

SourceMap

devtool 配置

热模块替换

webpack serve 默认开启
CSS style loader 实现了
js 文件需要自己处理

// main.js
// ...
if (module.hot) { // 是否支持热模块替换
    module.hot.accept('./js/some.js')
    module.hot.accept('./js/some2.js')
}

oneOf

每个文件只能被其中一个 loader 配置处理

include 和 exclude

eslint 和 babel 缓存

提升第一次以后的打包编译速度, 因为只处理修改了 js 文件, 没有修改的文件使用缓存

// webpack.prod.js
// ...
rules: [
    // ...
    {
        test: /\.js$/,
        include: path.resolve(__dirname, "../src"),
        loader: "babel-loader",
        options: {
            cacheDirectory: true,   // 开启 babel 缓存
            cacheCompression: false,    // 关闭缓存文件压缩
        }
    }
],
plugins: [
    {
        new ESLintPlugin({
            context: path.resolve(__dirname, "../src"),
            exclude: "node_modules",
            cache: true, // 开启缓存
            cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslintcache"),  // 指定生成缓存文件位置
        })
    }
]
//...

多进程打包

仅在特别耗时的操作中使用, 因为每个进程启动就有大约为600ms 左右的开销

// 获取CPU核数
const os = require("os")
// cpu 核数
const threads = os.cpus().length

# 下载包
npm i thread-loader -D

eslint babel terser 开启多进程处理

// webpack.prod.js
//...
// 获取CPU核数
const os = require("os")
// cpu 核数
const threads = os.cpus().length

const TersetWebpackPlugin = require("terser-webpack-plugin")
// ...
rules: [
    // ...
    {
        test: /\.js$/,
        include: path.resolve(__dirname, "../src"),
        use: [
                {
                    loader: "thread-loader", // 开启多进程
                    options: {
                        works: threads, // 进程数量
                    }
                },
                {
                    loader: "babel-loader",
                    options: {
                        cacheDirectory: true,   // 开启 babel 缓存
                        cacheCompression: false,    // 关闭缓存文件压缩
                    }
                }
        ]
    }
],
plugins: [
    //  ...
    new ESLintPlugin({
        context: path.resolve(__dirname, "../src"),
        exclude: "node_modules",
        cache: true, // 开启缓存
        cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslintcache"),  // 指定生成缓存文件位置
        threads,    // 开启多进程和设置进程数量
    }),
    //new TersetWebpackPlugin({
    //    parallel: threads   // 开启多进程和设置进程数量
    //})
    // ...
],
optimization: {
    // 压缩操作 webpack5 推荐放这里
    minimizer: [
        new CssMinimizerPlugin(),
        new TersetWebpackPlugin({
            parallel: threads   // 开启多进程和设置进程数量
        })
    ]
}

Tree Shaking

Tree Shaking 是一个术语, 通常用于描述移出 js 中没有用到的代码
依赖于 ES Module

减少 babel 生成文件的体积

babel 为编译的每个文件都插入了辅助代码, 使代码体积过大.

@babel/plugin-transform-runtime: 禁用了 babel 自动对每个文件的 runtime 注入, 而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用.

npm i @babel/plugin-transform-runtime -D

// webpack.prod.js
// ...
rules: [
    // ...
    {
        test: /\.js$/,
        include: path.resolve(__dirname, "../src"),
        use: [
                {
                    loader: "thread-loader", // 开启多进程
                    options: {
                        works: threads, // 进程数量
                    }
                },
                {
                    loader: "babel-loader",
                    options: {
                        cacheDirectory: true,   // 开启 babel 缓存
                        cacheCompression: false,    // 关闭缓存文件压缩
                        plugins: ["@babel/plugin-transform-runtime"]    // 使用 @babel/plugin-transform-runtime
                    }
                }
        ]
    }
],
// ...

simdot 脉望