vue webpack打包优化

如果我们的 Vue 项目比较大．或者说项目中引入了许多第三方库，那么在执行 npm run build 构建项目的时候会极其的慢．比如我现在的项目就每次打包就要 83s。下面是我整理的一些优化技巧，可以有效地提高打包速度。一、配置 resolve.modules1，优化原理（1）webpack 的 resolve.modules 是用来配置模块库（即 nod...

song_de

9292人浏览 · 2018-08-08 16:54:22

song_de · 2018-08-08 16:54:22 发布

如果我们的 Vue 项目比较大．或者说项目中引入了许多第三方库，那么在执行 npm run build 构建项目的时候会极其的慢．比如我现在的项目就每次打包就要 83s。

下面是我整理的一些优化技巧，可以有效地提高打包速度。

一、配置 resolve.modules

1，优化原理

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

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

2，操作步骤

（1）打开 build/webpack.base.conf.js 文件，添加如下高亮配置：

module.exports = {

resolve: {

extensions: ['.js', '.vue', '.json'],

modules: [

resolve('src'),

resolve('node_modules')

],

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src'),

}

},

（2）保存后再次构建项目，可以发现时间缩短了 13s 左右。

二、配置装载机的 include & exclude

1，优化原理

（1）webpack 的装载机（loaders）里的每个子项都可以有 include 和 exclude 属性：

include：导入的文件将由加载程序转换的路径或文件数组（把要处理的目录包括进来）
exclude：不能满足的条件（排除不处理的目录）

（2）我们可以使用 include 更精确地指定要处理的目录，这可以减少不必要的遍历，从而减少性能损失。

（3）同时使用 exclude 对于已经明确知道的，不需要处理的目录，予以排除，从而进一步提升性能。

2，操作步骤

（1）打开 build/webpack.base.conf.js 文件，添加如下高亮配置：

第 7 行的 easytable 如果项目没用到可以把它从 include 中去除。

module: {

rules: [

{

test: /\.vue$/,

loader: 'vue-loader',

options: vueLoaderConfig,

include: [resolve('src'), resolve('node_modules/vue-easytable/libs')],

exclude: /node_modules\/(?!(autotrack|dom-utils))|vendor\.dll\.js/

},

{

test: /\.js$/,

loader: 'babel-loader',

include: [resolve('src')],

exclude: /node_modules/

},

（2）保存后再次构建项目，可以发现时间又缩短了 2s 左右。

三、使用 webpack-parallel-uglify-plugin 插件来压缩代码

1，优化原理

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

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

2，操作步骤

（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

}

}),

（3）保存后再次构建项目，可以发现时间又缩短了 55s 左右。

四、使用 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,

})

]

}

五、利用 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 文件，添加一条编译命令：

{

"name": "ddjk_vue",

"version": "1.0.0",

"description": "A Vue.js project",

"author": "Boss",

"private": true,

"scripts": {

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

"start": "npm run dev",

"build": "node build/build.js",

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

},

（3）接着执行 npm run build:dll 命令来生成 vendor.dll.js。

注意：如果之后这些需要预编译的库又有变动，则需再次执行 npm run build:dll 命令来重新生成 vendor.dll.js

（4）index.html 这边将 vendor.dll.js 引入进来。

<body>

<div id="app"></div>

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

</body>

（5）打开 build/webpack.base.conf.js 文件，编辑添加如下高亮配置，作用是通过 DLLReferencePlugin 来使用 DllPlugin 生成的 DLL Bundle。

const webpack = require('webpack');

module.exports = {

context: path.resolve(__dirname, '../'),

entry: {

app: './src/main.js'

},

//.....

plugins: [

// 添加DllReferencePlugin插件

new webpack.DllReferencePlugin({

context: path.resolve(__dirname, '..'),

manifest: require('./vendor-manifest.json')

}),

]

}

（6）保存后再次构建项目，可以发现时间又缩短了许多。

原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_2105.html

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^