首页 > 其他分享 >webpack 优化

webpack 优化

时间:2022-08-25 22:56:20浏览次数:91  
标签:... 缓存 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,优化
From: https://www.cnblogs.com/simdot/p/16626054.html

相关文章

  • 综合案例-黑马旅游网_分类数据展示缓存优化
    综合案例-黑马旅游网_分类数据展示缓存优化分析发现,分类的数据在每一次页面加载后都会重写请求数据库来加载对数据库压力比较大而且分类的数据不会经常产生变化所有可......
  • 用1年时间把网站权重做到4的企业站优化案例
    ​我做的这个行业是属于偏冷行业,同行那些不专业的家伙,都把重点放在网站上面,百度一搜产品词,大半都是网站平台在首页,我心里就冷笑了。其实,我只做站内优化,首页和产品页面全......
  • MySQL查询性能优化七种武器之索引下推
    前面已经讲了MySQL的其他查询性能优化方式,没看过可以去了解一下:MySQL查询性能优化七种武器之索引潜水MySQL查询性能优化七种武器之链路追踪今天要讲的是MySQL的另一种查......
  • CountDownLatch+ThreadPool 优化统计报表
    一、功能要求业务方要求每天发一个统计日报到用户邮箱、业务为统计每日的多项市场指标数据,因为数据表中数据量庞大,每项指标的SQL是单独的逻辑,所以要在一个接口内执行多个S......
  • webpack中path.join()和path.resolve()区别
    constpath=require('path')path模块提供了用于处理文件和目录的路径的实用工具,使用时引入即可。 1.__dirname和__filename的区别__dirname,是一个成员,用来动态获取......
  • 为什么Adam 不是默认的优化算法?
    由于训练时间短,越来越多人使用自适应梯度方法来训练他们的模型,例如Adam它已经成为许多深度学习框架的默认的优化算法。尽管训练结果优越,但Adam和其他自适应优化方法与随机......
  • 长尾关键词挖掘工具--一个站长做网站优化必备的工具
      在关键词挖掘工具出现前,站长是通过百度指数、搜索引擎页脚的相关搜索来获取关键词的,这样获取关键词的效率极低,因此一些懂技术的seo高手就开发出了关键词挖掘工具,可......
  • 矩阵快速幂优化dp
    writtenon2022-08-24总结一下该算法适用题目类型以及一般方法。在碰到需要优化的dp时,这是一种思考方向。在往这方面思考时,要注重观察转移形式是否是基本一致的。以P3......
  • onTrimMemory() 提示应用进行内存优化
    参考文档:  https://www.androidperformance.com/2015/07/20/Android-Performance-Memory-onTrimMemory/#/0-OnTrimMemory%E5%9B%9E%E8%B0%83%E7%9A%84%E4%BD%9C%E7%94%......
  • SQL Server查询优化
    从上至下优化看过一篇文章,印象深刻,里面将数据库查询优化分为四个大的方向使用钞能力——给DB服务器加物理配置,内存啊,CPU啊,硬盘啊,全上顶配替换存储系统——根据实际的......