唯品秀前端博客
当前位置: 前端开发 > Vue.js专区 > 能让你的vue项目打包速度提升60%+技巧

能让你的vue项目打包速度提升60%+技巧

2020-01-16 分类:Vue.js专区 作者:管理员 阅读(240)

不知道大家有没有这种感受,vue-cli项目慢慢大起来后打包速度超慢,每次打包3-5分钟你能接受吗?尤其在修复bug时候我们经常需要提交代码到测试服,打包成了最耗时的一个步骤,那么怎样去优化呢

配置 resolve.modules

1、webpack 的 resolve.modules 是用来配置模块库(即 node_modules)所在的位置。当 js 里出现 import 'vue' 这样不是相对、也不是绝对路径的写法时,它便会到 node_modules 目录下去找。

2、在默认配置下,webpack 会采用向上递归搜索的方式去寻找。但通常项目目录里只有一个 node_modules,且是在项目根目录。为了减少搜索范围,可我们以直接写明 node_modules 的全路径。

3、最终速度提升不是很明显,但有总比没好

打开build/webpack.base.conf.js 文件,新增配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    // 新增start
    modules: [
      resolve('src'),
      resolve('node_modules')
    ],
    // 新增end
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

webpack-parallel-uglify-plugin插件来压缩代码

1、默认情况下 webpack 使用 UglifyJS 插件进行代码压缩,但由于其采用单线程压缩,速度很慢。

2、我们可以改用 webpack-parallel-uglify-plugin 插件,它可以并行运行 UglifyJS 插件,从而更加充分、合理的使用 CPU 资源,从而大大减少构建时间。

执行如下命令安装 webpack-parallel-uglify-plugin

1
npm i webpack-parallel-uglify-plugin // 注意安装版本

打开 build/webpack.prod.conf.js 文件,并作如下修改:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin'); // 引入插件

minimizer: [
      // 删掉webpack提供的UglifyJS插件
      // new UglifyJsPlugin({
      //   uglifyOptions: {
      //     mangle: {
      //       safari10: true
      //     }
      //   },
      //   sourceMap: config.build.productionSourceMap,
      //   cache: true,
      //   parallel: true
      // }),
      new ParallelUglifyPlugin({
        // 传递给 UglifyJS的参数如下:
        uglifyJS: {
          output: {
            /*
             是否输出可读性较强的代码,即会保留空格和制表符,默认为输出,为了达到更好的压缩效果,
             可以设置为false
            */

            beautify: false,
            /*
             是否保留代码中的注释,默认为保留,为了达到更好的压缩效果,可以设置为false
            */

            comments: false
          },
          compress: {

            /*
             是否删除代码中所有的console语句,默认为不删除,开启后,会删除所有的console语句
            */

            drop_console: true,

            /*
             是否内嵌虽然已经定义了,但是只用到一次的变量,比如将 var x = 1; y = x, 转换成 y = 5, 默认为不
             转换,为了达到更好的压缩效果,可以设置为false
            */

            collapse_vars: true,

            /*
             是否提取出现了多次但是没有定义成变量去引用的静态值,比如将 x = 'xxx'; y = 'xxx'  转换成
             var a = 'xxxx'; x = a; y = a; 默认为不转换,为了达到更好的压缩效果,可以设置为false
            */

            reduce_vars: true
          }
        },
        /*
             是否在UglifyJS删除没有用到的代码时输出警告信息,默认为输出,可以设置为false关闭这些作用
             不大的警告
            */

        warnings: false
      }),
      // Compress extracted CSS. We are using this plugin so that possible
      // duplicated CSS from different components can be deduped.
      new OptimizeCSSAssetsPlugin()
    ]

打包报错:`warnings` is not a supported option解决

如果安装这个插件后出现这个报错问题,那么应该你不是按照我上面配置来的,warning配置不对。在很多教程上warning选项放在了compress里,而实际最后查官方文档所知,应该单独拿出来,如下:

1
2
3
4
5
compress: {
warnings: false
}
改为:
warnings: false

[cc lang='php']

未完待续。。。

「三年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(3) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
3

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:没有了,已经是最新文章

你可能感兴趣

共有 2 - 能让你的vue项目打包速度提升60%+技巧

  1. 至尊 Windows NT Chrome 69.0.3497.100

    文章很不错

  2. 大川渝个人博客 Windows NT Chrome 78.0.3904.108

    文章很不错 。

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与,主题源码 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 245 篇
  • 草稿数目: 0 篇
  • 分类数目: 15 个
  • 独立页面: 6 个
  • 评论总数: 888 条
  • 链接总数: 16 个
  • 标签总数: 438 个
  • 注册用户: 5930 人
  • 访问总量: 8894389 次
  • 最近更新: 2020年2月16日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线