减小文件搜索范围

配置 resolve.modules

Webpack的resolve.modules配置模块库(即 node_modules)所在的位置,在 js 里出现 import 'vue' 这样不是相对、也不是绝对路径的写法时,会去 node_modules 目录下找。但是默认的配置,会采用向上递归搜索的方式去寻找,但通常项目目录里只有一个 node_modules,且是在项目根目录,为了减少搜索范围,可以直接写明 node_modules 的全路径;同样,对于别名(`alias)的配置,亦当如此:

function resolve (dir) {
return path.join(__dirname, '..', dir)
} module.exports = {
resolve: {
extensions: ['.js', '.vue', '.json'],
modules: [
resolve('src'),
resolve('node_modules')
],
alias: {
'vue$': 'vue/dist/vue.common.js',
'src': resolve('src'),
'assets': resolve('src/assets'),
'components': resolve('src/components'),
// ...
'store': resolve('src/store')
}
},
...
}

合理设置 test & include & exclude

test:必须满足的条件(正则表达式,不要加引号,匹配要处理的文件)

exclude:不能满足的条件(排除不处理的目录)

include:导入的文件将由加载程序转换的路径或文件数组(把要处理的目录包括进来)

这可以减少不必要的遍历,从而减少性能损失。

替换代码压缩工具

Webpack 默认提供的 UglifyJS 插件,由于采用单线程压缩,速度慢 ;

webpack-parallel-uglify-plugin 插件可以并行运行 UglifyJS 插件,更加充分而合理的使用 CPU 资源,这可以大大减少的构建时间;

当然,该插件应用于生产环境而非开发环境,安装插件后,进行如下配置:

// 删掉webpack提供的UglifyJS插件
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false,
// drop_console: true
// },
// sourceMap: true
// }), // 增加 webpack-parallel-uglify-plugin来替换
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
new ParallelUglifyPlugin({
cacheDir: '.cache/', // 设置缓存路径,不改动的调用缓存,第二次及后面build时提速
uglifyJS:{
output: {
comments: false
},
compress: {
warnings: false
}
}
})

也试了一下同类型插件 webpack-uglify-parallel,但并没有webpack-parallel-uglify-plugin效果好(可能因项目而异,在大家项目中可以使用对比)。

webpack-parallel-uglify-plugin 插件相对 UglifyJsPlugin 打出的包略大(但是不明显);这里的提速和增加的体积相比,我选择了追求速度(使用后我从40秒降到了19秒)。

拷贝静态文件

使用copy-webpack-plugin插件:把指定文件夹下的文件复制到指定的目录;其配置如下:

var CopyWebpackPlugin = require('copy-webpack-plugin')

plugins: [
...
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]

DllPlugin & DllReferencePlugin

Dll这个概念应该是借鉴了Windows系统的dll。一个dll包,就是一个纯纯的依赖库,它本身不能运行,是用来给你的app引用的。

打包dll的时候,Webpack会将所有包含的库做一个索引,写在一个manifest文件中,而引用dll的代码(dll user)在打包的时候,只需要读取这个manifest文件,就可以了。

一、在项目build文件夹下新增文件webpack.dll.conf.js,内容如下

var path = require('path')
var webpack = require('webpack') module.exports = {
entry: {
vendor: [ // 这里填写需要的依赖库
'babel-polyfill',
'axios',
'vue/dist/vue.common.js',
'vue-router',
'pingpp-js',
"region-picker"
]
},
output: {
path: path.resolve(__dirname, '../static/js'),
filename: '[name].dll.js',
library: '[name]_library'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
plugins: [
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
libraryTarget: 'commonjs2',
name: '[name]_library'
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}

二、在webpack.prod.conf.js文件里插件部分添加:

plugins: [
...
// copy custom static assets
new webpack.DllReferencePlugin({
context: path.resolve(__dirname, '..'),
manifest: require('./vendor-manifest.json')
})
]

三、在项目根目录index.html文件中添加:

<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="<%= webpackConfig.output.publicPath %>spa/js/vendor.dll.js"></script> //添加这句,路径可根据所需修改
</body>

四、在package.json里打包dll添加命令

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

五、命令顺序

npm run build:dll //打包一次之后依赖库无变动不需要执行

npm run build

优点

Dll打包以后是独立存在的,只要其包含的库没有增减、升级,hash也不会变化,因此线上的dll代码不需要随着版本发布频繁更新。

App部分代码修改后,只需要编译app部分的代码,dll部分,只要包含的库没有增减、升级,就不需要重新打包。这样也大大提高了每次编译的速度。

假设你有多个项目,使用了相同的一些依赖库,它们就可以共用一个dll。

19s->15s

设置 babel 的 cacheDirectory 为true

在webpack.base.conf.js中修改babel-loader:

 loader: 'babel-loader?cacheDirectory=true',

15s->14s

设置 noParse

如果你确定一个模块中,没有其它新的依赖,就可以配置这项, Webpack 将不再扫描这个文件中的依赖,这对于比较大型类库,将能促进性能表现,具体可以参见以下配置:

module: {
noParse: /node_modules\/(element-ui\.js)/,
rules: [
{
...
}
}

happypack

加上后没太大的效果,可能用法有问题,有待深入尝试

vue-cli webpack2项目打包优化的更多相关文章

  1. vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大

    从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...

  2. vue系列之项目打包

    vue完成项目后,如何打包成静态文件,并且用Node调试 打包 1.修改config里面的index.js里面的productionSourceMap为false,默认情况是true(true代表打包 ...

  3. 解决@vue/cli 创建项目是安装chromedriver时失败的问题

    最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...

  4. Vue CLI 创建项目

    使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...

  5. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  6. 小型 Web 页项目打包优化方案

    背景   目前团队中新的 Web 项目基本都采用了 Vue 或 React ,加上 RN,这些都属于比较重量级的框架,然而对于小型 Web 页面,又显得过大.早期的一些项目则使用了较原始的 HTML ...

  7. 基于vue脚手架的项目打包上线(发布)方法和误区

    最近要把vue脚手架开发的一个项目上线,只知道vue脚手架是基于node的服务端项目,那么只需要 npm run dev 就可以轻松启动整个项目,当我想当然的给服务器配置合适的node环境(这里也遇到 ...

  8. 一次vue-cli 2.x项目打包优化经历(优化xlsx插件)

    一.分析各模块打包后大小 用vue-cli创建的项目,已经集成 webpack-bundle-analyzer.详见文件 build/webpack.prod.conf.js,代码如下: if (co ...

  9. vue cli搭建项目及文件引入

    cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...

随机推荐

  1. Elasticsearch集群

    详细Elasticsearch安装: https://www.cnblogs.com/littlehb/p/8406378.html 安装之前需先优化内核: https://www.cnblogs.c ...

  2. Node 杂技

    1.关于require 当文件夹a中含有index.js时,在b.js中如果有require("文件夹a的路径"),则将会自动执行index.js的语句

  3. [转] Web前端开发工程师常用技术网站整理

    1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...

  4. [转] js中的事件委托或是事件代理详解

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  5. checkbox选中相关问题总结

    html: <input type="checkbox" name="fruit" id="apple">苹果 <inpu ...

  6. JSP中三大指令

    JSP指令概述 JSP指令的格式:<%@指令名 attr1=”” attr2=”” %>,一般都会把JSP指令放到JSP文件的最上方,但这不是必须的.  JSP中的指令共有三个:page. ...

  7. vs code 前端如何以服务器模式打开 [安装服务器] server insteall

    首先要安装 vs code 和 node.js(既然是前端就必须回,不会的面壁思过)然后在命令符中输入 npm install -g live-server 进行安装,(简单的NPM安装)安装成功后在 ...

  8. openstack2 kvm

    一.kvm安装 1.首先虚拟机的话需要打开虚拟化功能,服务器的话需要在bios中设置 2.安装kvm用户态管理工具qemu-kvm 和 用来管理kvm虚拟机的插件libvirt和创建虚拟机用的virt ...

  9. 51Nod1039 N^3 Mod P 数论 原根 BSGS

    原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1039.html 题目传送门 - 51Nod1039 题意 题解 这题我用求高次剩余的做法,要卡常数. ...

  10. Django1.11.7配置静态文件

    Django配置静态文件分为三步 1.建文件夹 2.设置setting 3.页面引用 1.文件目录结构 在APP下新建static文件夹,将js和css文件放入文件夹 2.配置settings.py ...