webpack vue/cli-service3 打包优化总结

最新推荐文章于 2024-04-18 13:22:10 发布

mumei_

最新推荐文章于 2024-04-18 13:22:10 发布

阅读量386

点赞数

文章标签： webpack vue.js 前端

本文链接：https://blog.csdn.net/mumei_/article/details/131973098

版权

文章介绍了如何使用thread-loader加速Webpack的打包过程，将原本200s的打包时间缩短至30s。此外，通过image-webpack-loader压缩图片以减小打包体积，并在开发环境禁用。提取公用代码以提升效率，以及利用hard-source-webpack-plugin加快二次构建速度。webpack-bundle-analyzer工具用于分析包的大小和chunk分布。

摘要由CSDN通过智能技术生成

webpack vue/cli-service 打包优化总结

package.json

{
      "vue": "^2.6.7",
      "@vue/cli-service": "^3.12.1",
}

如果打包慢可采用多线程打包（thread-loader）
本来项目是约200s的多线程打包最快能到30s!
配置如下

 config.module
        .rule('js')
        .use('thread-loader')
        .loader('thread-loader')
        .tap(options => {
            // 设置 thread-loader 的选项
            options = {
                workers: 3
            }
            return options
        })

打包体积减少可通过压缩图片，提取公用代码方式，和删除项目用已经不用的插件来
webpack-bundle-analyzer 可帮助你分析包的大小及chunk的分布情况
压缩图片配置

config.module
    .rule('images')
    .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
    .use('image-webpack-loader')
    .loader('image-webpack-loader')
    .options({
        bypassOnDebug: true,
        disable: true // 开发环境下禁用图片压缩
    })

提取公用代码方式

   libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial'
        },

加快二次构建速度

yarn add hard-source-webpack-plugin -S -dev
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')

configureWebpack: {
        plugins: [
            new HardSourceWebpackPlugin(),
        ]
}