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

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

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

不知道大家有没有这种感受,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']

未完待续。。。

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

赞(9) 打赏

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

支付宝
微信
9

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

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

4 条评论关于"能让你的vue项目打包速度提升60%+技巧"

  1. 与梦随行 Windows NT Chrome 83.0.4103.97

    特效不错

  2. yehaofree Mac OS X Chrome 81.0.4044.138

    点赞!

  3. 至尊 Windows NT Chrome 69.0.3497.100

    文章很不错

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

    文章很不错 。

博客简介

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

精彩评论

  • 江吟辞(1周前 (06-29))

    好难坚持啊,我还没毕业,不知道啥时候才能像您一样厉害

    评:碎言碎语
  • 和我、恋爱吧(1周前 (06-29))

    怎么没见你更新呢,比较忙吗

    评:碎言碎语
  • 游离(1周前 (06-29))

    站主,你好!请教一下,前台的pc 端和移动端,你是怎么实现响应式的呢?媒体查询的同时写两套样...

    评:碎言碎语
  • 권지용(1周前 (06-29))

    最近在学习前端,看了博主很多文章,收益匪浅,感谢大佬

    评:碎言碎语
  • 白君也(1周前 (06-28))

    哇 自己制作的吗 在哪学的技术啊 好厉害

    评:碎言碎语
  • 管理员(3周前 (06-16))

    时间区间问题,因为目前是2020年,你所选不可能超出这个时间吧,当然,代码是根据你的业务来,...

    评:js时间戳完美转换成阴历农历格式

友情链接

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

站点统计

  • 文章总数: 258 篇
  • 草稿数目: 0 篇
  • 分类数目: 16 个
  • 独立页面: 6 个
  • 评论总数: 902 条
  • 链接总数: 17 个
  • 标签总数: 459 个
  • 注册用户: 8220 人
  • 访问总量: 9212981 次
  • 最近更新: 2020年7月3日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线