记录初次webpack对vue项目打包优化

·  阅读 1486

先上图:最终打包速度从11s多优化到了4.177s,二次打包后提升到了3s多

因初次做优化,使用的东西是一些文档的,优化内容较少。

末尾提供相关文档连接。

第一步: 压缩代码用ParalleUglifyPlugin代替自带的UglifyJsPlugin插件

优化原理

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

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

操作步骤 (1)执行如下命令安装 webpack-parallel-uglify-plugin

(1)npm i webpack-parallel-uglify-plugin

(2)打开 build/webpack.prod.conf.js 文件,并作如下修改: const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

//....

// 删掉webpack提供的UglifyJS插件

//new UglifyJsPlugin({

//  uglifyOptions: {

//    compress: {

//      warnings: false

//    }

//  },

//  sourceMap: config.build.productionSourceMap,

//  parallel: true

//}),

// 增加 webpack-parallel-uglify-plugin来替换

new ParallelUglifyPlugin({

  cacheDir: '.cache/',

  uglifyJS:{

    output: {

      comments: false

    },

    compress: {

      warnings: false

    }

  }

}),
复制代码

第二步: 利用 DllPlugin 和 DllReferencePlugin 预编译资源模块

1,优化原理 (1)我们的项目依赖中通常会引用大量的 npm 包,而这些包在正常的开发过程中并不会进行修改,但是在每一次构建过程中却需要反复的将其解析,而下面介绍的两个插件就是用来规避此类损耗的:

DllPlugin 插件:作用是预先编译一些模块。 DllReferencePlugin 插件:它的所用则是把这些预先编译好的模块引用起来。 (2)注意:DllPlugin 必须要在 DllReferencePlugin 执行前先执行一次,dll 这个概念应该也是借鉴了 windows 程序开发中的 dll 文件的设计理念。

2,操作步骤 (1)在 build 文件夹中新建 webpack.dll.conf.js 文件,内容如下(主要是配置下需要提前编译打包的库):

const path = require('path');

const webpack = require('webpack');

module.exports = {

entry: {

vendor: ['vue/dist/vue.common.js',

        'vue-router',

        'axios',

        'mint-ui',

        'vue-cordova',

        '@fortawesome/fontawesome-svg-core',

        '@fortawesome/free-solid-svg-icons',

        '@fortawesome/free-regular-svg-icons',

        '@fortawesome/free-brands-svg-icons',

        '@fortawesome/vue-fontawesome']
复制代码

},

output: {

path: path.join(__dirname, '../static/js'),

filename: '[name].dll.js',

library: '[name]_library'       // vendor.dll.js中暴露出的全局变量名
复制代码

},

plugins: [

new webpack.DllPlugin({

  path: path.join(__dirname, '.', '[name]-manifest.json'),

  name: '[name]_library'

}),

new webpack.optimize.UglifyJsPlugin({

  compress: {

    warnings: false

  }

})
复制代码

]

};

(2)在package.json/scripts下中添加dll命令

"dll": "webpack --config ./build/webpack.dll.conf.js"

运行:

npm run dll

然后再

npm run dev或npm run build

提取公共代码 使用CommonsChunkplugin提取公共的模块,可以减少文件体积,也有助于浏览器层的文件缓存

npm run dll npm run dev 或npm run build

第三步:www.hangge.com/blog/cache/… 使用 HappyPack 来加速代码构建

1,优化原理

(1)由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以 Webpack 需要处理的事情只能一件一件地做,不能多件事一起做。

(2)而 HappyPack 的处理思路是:将原有的 webpack 对 loader 的执行过程,从单一进程的形式扩展多进程模式,从而加速代码构建。

2,操作步骤

(1)执行如下命令安装 happypack:

(1)npm i happypack
(2)打开 build/webpack.base.conf.js 文件,并作如下修改:
复制代码

const HappyPack = require('happypack');

const os = require('os');

const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module.exports = {

module: {

rules: [
  {
    test: /\.js$/,
    //把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行
    loader: 'happypack/loader?id=happyBabel',
    include: [resolve('src')],
    //排除node_modules 目录下的文件
    exclude: /node_modules/
  },
]
复制代码

},

plugins: [

new HappyPack({
    //用id来标识 happypack处理那里类文件
  id: 'happyBabel',
  //如何处理  用法和loader 的配置一样
  loaders: [{
    loader: 'babel-loader?cacheDirectory=true',
  }],
  //共享进程池
  threadPool: happyThreadPool,
  //允许 HappyPack 输出日志
  verbose: true,
})
复制代码

] }

相关连接: 1,Webpack3.X升级到4.X多页面实战和构建优化: juejin.cn/post/684490…

2,vue webpack打包优化: blog.csdn.net/song_de/art…

3,DLLPlugin 和 DLLReferencePlugin webpack.docschina.org/plugins/dll…

4,Vue.js - 提高项目build打包速度(webpack构建性能优化技巧汇总) www.hangge.com/blog/cache/…

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改