webpack 优化

2022-08-25 23:02:42 阅读：173 来源： 互联网

标签：... 缓存 babel 开启 loader webpack js 优化

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 脉望

标签：...,缓存,babel,开启,loader,webpack,js,优化
来源： https://www.cnblogs.com/simdot/p/16626054.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9