vue-cli webpack2项目打包优化分享


Posted in Javascript onFebruary 07, 2018

减小文件搜索范围

配置 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项目打包优化分享就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
javascript操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 #Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 #Javascript
vue中如何使用ztree
Feb 06 #Javascript
javascript回调函数详解
Feb 06 #Javascript
原生JS实现瀑布流插件
Feb 06 #Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 #Javascript
20行JS代码实现粘贴板复制功能
Feb 06 #Javascript
You might like
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
ArrayList类(增强版)
2007/04/04 Javascript
javascript 表单规则集合对象
2009/07/21 Javascript
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
Django实现学员管理系统
2019/02/26 Python
python字符串循环左移
2019/03/08 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
Python中pass的作用与使用教程
2020/11/13 Python
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
编辑找工作求职信范文
2013/12/16 职场文书
机修工工作职责
2014/02/21 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
Python基础之元组与文件知识总结
2021/05/19 Python
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js