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 相关文章推荐
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
js密码强度检测
Jan 07 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
es6函数之rest参数用法实例分析
Apr 18 Javascript
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
浅谈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
留言板翻页的实现详解
2006/10/09 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
温泉秘密:Onsen Secret
2020/07/06 全球购物
日化店促销方案
2014/03/26 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
推广普通话标语
2014/06/27 职场文书
数学教研活动总结
2014/07/02 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
Python 如何安装Selenium
2021/05/06 Python
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android