当前位置:首页 > 博客 >Node.js > 正文

webpack打包优化方案实践

时间:2019-05-17 20:32   作者:admin   点击:

项目背景:

    之前都是用vue-cli构建的项目,从来都没在意过打包的速度,因为打包慢,我就运行了命令出去看看世界(偷哈懒)就是了是吧。但是因为有热更新,每次修改文件都要重新编译,这会严重影响开发时间(心情)的,后面我想能不能优化下打包的速度


优化步骤:

    一、查找了一些资料,一共有几个优化点

    a.将一些loader的范围控制下,不要去node-modules里面找了,节省时间

    b. happyPack 利用计算机的多核心优化打包

    c.动态链接库 DllPlugin 插件

    d.使用CommonsChunkPlugin提取公共的模块

    f.代码压缩用ParallelUglifyPlugin代替自带的 UglifyJsPlugin插件

    我主要采用了a和b进行了优化

    二、先看哈效果

    优化前:

    image.png

    优化后:

    image.png

    

    效果还是很明显的对吧(这里卖个关子,做了这么多配置,其实就配置一个开关就好了!)

    

    

    三、具体操作

    话不多说,看具体操作

    a. 先安装happypack

    npm i happypack -D

    b.在webpack.base.js中引入并使用

const HappyPack = require('happypack');
// 将loader改成如下格式(我们以babel)
 test: /\.js$/,
 use: ['happypack/loader?id=babel'],
 
 // 引入插件
 new HappyPack({
          //用id来标识 happypack处理那里类文件
          id: 'babel',
          //如何处理  用法和loader 的配置一样
          loaders: [{
            loader: 'babel-loader?cacheDirectory=true',
          }],
          //允许 HappyPack 输出日志
          verbose: true,
        })
        
   // 另外一个eslint loader     
  new HappyPack({
      id: 'eslint',
      loaders: [{
        loader: 'eslint-loader',
        options: {
          formatter: require('eslint-friendly-formatter'),
          emitWarning: !config.dev.showEslintErrorsInOverlay
        }
      }],
    }),

    这样就可以了,还有一些其他的loader也可以这样处理,但是并不是越多越好,

    而且vue-loader也不行,不兼容这个插件

    这样你再构建试试呢?



    c.利用DllPlugin 来构建

    主要是将一些常用的,但是又不会修改的包单独构建处理,比如react、vue等全家桶用到的包

    实际操作:新建webpack.dll.conf.js文件

// webpack.dll.conf.js

var path = require("path");
var webpack = require("webpack");

module.exports = {
// dll 包含模块的名字
entry: {
vendor: ['vue/dist/vue.runtime.esm.js', 'lodash', 'vuex', 'axios', 'vue-router', 'element-ui', 'js-cookie', 'vue-cropper', 'vue-moment']
},
output: {
path: path.join(__dirname, '../static/js'),
filename: '[name].dll.js',
// 给DllPlugin中的name使用,需要和 webpack.DllPlugin 中的 name 字段保持一致
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
// 和上面的 library 保持一致
name: '[name]_library',
context: __dirname
}),
]
};
// webpack.base.config.js
使用这个插件 因为这个是webpack的插件,不需要单独安装
new webpack.DllReferencePlugin({
      manifest: require('./vendor-manifest.json') // 指向之前生成的 vendor-mainfest.json
    })]

在index.html模板中加入

<script src="./static/js/vendor.dll.js"></script>

    现在你重新构建下你的应用试试,


    其他的插件,其实用法都是可以百度到的,引入进去就可以了。


    总结:你是不是发现,第二种构建提升并没有想象的那么大,是不是觉得并没有啥子卵用!恭喜你,真的没啥卵用。我后面发现,构建速度慢的原因是因为eslint格式检查造成的,你可以用多核心去检查,这样会发现构建速度至少快一倍,还有一个更简单的,就是直接不用它。上面说的都是本地dev的情况。build待测试,但是肯定用了这些优化是要好一些的。