vue-cli webpack2项目打包优化

减小文件搜索范围

配置 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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏依乐祝

asp.Net Core免费开源分布式异常日志收集框架Exceptionless安装配置以及简单使用图文教程

最近在学习张善友老师的NanoFabric 框架的时了解到Exceptionless : https://exceptionless.com/ !因此学习了一下...

811
来自专栏拂晓风起

Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)

2732
来自专栏哲学驱动设计

一个简单的 Chrome 插件

之前做秒杀器的时候,使用的是 WPF 客户端,借助 HttpWebRequest 来实现远程调用。 后来看到别人抢火车票的软件是一个 Chrome 插件,发现这...

1925
来自专栏张善友的专栏

让Jexus支持高并发请求的优化技巧

Jexus web server 5.1 每个工作进程的最大并发数固定为1万,最多可以同时开启4个工作进程,因此,每台Jexus V5.1服务器最多可以到支持4...

1955
来自专栏写代码的海盗

hadoop2.2.0安装需要注意的事情

今天在安装hadoop2.2.0时遇到若干问题,解决这些问题有些心得,记录下来以备不时之需。 问题1、master和slave之间不能相互ssh免密码登陆。  ...

3164
来自专栏Albert陈凯

HTTP、TCP、UDP:通信协议的规则和区别

TCP、HTTP、UDP:都是通信协议,也就是通信时所遵守的规则,只有双方按照这个规则“说话”,对方才能理解或为之服务。 TCP HTTP UDP三者的...

2888
来自专栏技术博客

MVC项目开发中那些用到的知识点(js css优化-- 合并和压缩)

在项目框架中,首先要引用很多css和js文件,80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等...

1622
来自专栏JavaEdge

读懂Java中的Socket编程

Socket,又称为套接字,Socket是计算机网络通信的基本的技术之一。如今大多数基于网络的软件,如浏览器,即时通讯工具甚至是P2P下载都是基于Socket实...

822
来自专栏coding

tmux-让你完全脱离鼠标的终端神器

1222
来自专栏Ryan Miao

hexo 博客支持PWA和压缩博文

目标网站 https://blog.rmiao.top/ PWA yarn add hexo-offline 然后在root config.yml里新增 # o...

39814

扫码关注云+社区