社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 web前端 js教程 在vue-cli中如何实现webpack2项目打包优化

在vue-cli中如何实现webpack2项目打包优化

亚连
亚连
Jun 07, 2018 pm 02:15 PM
vue-cli 优化 打包

下面我就为大家分享一篇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>
  <p id="app"></p>
  <!-- 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: &#39;babel-loader?cacheDirectory=true&#39;,
登录后复制

15s->14s

设置 noParse

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

module: {
 noParse: /node_modules\/(element-ui\.js)/,
 rules: [
  {
   ...
  }
}
happypack
登录后复制

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Vue2.0中实现用户权限控制

通过vue.js实现微信支付

详解如何实现vuex（详细教程）

以上是在vue-cli中如何实现webpack2项目打包优化的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前 By DDD
R.E.P.O.如果您听不到任何人，如何修复音频
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7529
15
CakePHP 教程
1378
52
steam的账户名称是什么格式
81
11
win11激活密钥永久
54
19
NYT连接提示和答案
21
75
显示更多
Related knowledge
Win11新电脑收到后怎么优化设置提升性能？ Win11新电脑收到后怎么优化设置提升性能？ Mar 03, 2024 pm 09:01 PM

我们在收到新电脑后要怎么设置优化性能，用户们可以直接的打开隐私和安全性，然后点击常规（广告ID，本地内容，应用启动，设置建议，生产力工具或者是直接的打开本地组策略编辑器来进行操作就可以了。下面就让本来为用户们来仔细的介绍一下Win11新电脑收到后如何优化设置提升性能的方法吧。Win11新电脑收到后如何优化设置提升性能的方法方法一：1、按【Win+i】组合键，打开设置，然后左侧点击【隐私和安全性】，右侧点击Windows权限下的【常规（广告ID，本地内容，应用启动，设置建议，生产力工具）】。方法二

深度解读：为何Laravel速度慢如蜗牛？ 深度解读：为何Laravel速度慢如蜗牛？ Mar 07, 2024 am 09:54 AM

Laravel是一款广受欢迎的PHP开发框架，但有时候被人诟病的就是其速度慢如蜗牛。究竟是什么原因导致了Laravel的速度不尽如人意呢？本文将从多个方面深度解读Laravel速度慢如蜗牛的原因，并结合具体的代码示例，帮助读者更深入地了解此问题。1.ORM查询性能问题在Laravel中，ORM（对象关系映射）是一个非常强大的功能，可以让

Golang的gc优化策略探讨 Golang的gc优化策略探讨 Mar 06, 2024 pm 02:39 PM

Golang的垃圾回收（GC）一直是开发者们关注的一个热门话题。Golang作为一门快速的编程语言，其自带的垃圾回收器能够很好地管理内存，但随着程序规模的增大，有时候会出现一些性能问题。本文将探讨Golang的GC优化策略，并提供一些具体的代码示例。Golang中的垃圾回收Golang的垃圾回收器采用的是基于并发标记-清除（concurrentmark-s

C++ 程序优化：时间复杂度降低技巧 C++ 程序优化：时间复杂度降低技巧 Jun 01, 2024 am 11:19 AM

时间复杂度衡量算法执行时间与输入规模的关系。降低C++程序时间复杂度的技巧包括：选择合适的容器（如vector、list）以优化数据存储和管理。利用高效算法（如快速排序）以减少计算时间。消除多重运算以减少重复计算。利用条件分支以避免不必要的计算。通过使用更快的算法（如二分搜索）来优化线性搜索。

解码Laravel性能瓶颈：优化技巧全面揭秘！ 解码Laravel性能瓶颈：优化技巧全面揭秘！ Mar 06, 2024 pm 02:33 PM

解码Laravel性能瓶颈：优化技巧全面揭秘！Laravel作为一款流行的PHP框架，为开发者提供了丰富的功能和便捷的开发体验。然而，随着项目规模增大和访问量增加，我们可能会面临性能瓶颈的挑战。本文将深入探讨Laravel性能优化的技巧，帮助开发者发现并解决潜在的性能问题。一、数据库查询优化使用Eloquent延迟加载在使用Eloquent查询数据库时，避免

VSCode功能详解：它如何帮助你提高工作效率？ VSCode功能详解：它如何帮助你提高工作效率？ Mar 25, 2024 pm 05:27 PM

VSCode功能详解：它如何帮助你提高工作效率？随着软件开发行业的不断发展，开发人员们追求工作效率和代码质量成为了他们工作中的重要目标。在这个过程中，代码编辑器的选择成为了一项关键的决策。而在众多的编辑器中，VisualStudioCode（简称VSCode）凭借其强大的功能和灵活的扩展性受到了广大开发者的喜爱。本文将详细介绍VSCode的一些功能，探讨

Laravel性能瓶颈揭秘：优化方案大揭秘！ Laravel性能瓶颈揭秘：优化方案大揭秘！ Mar 07, 2024 pm 01:30 PM

Laravel性能瓶颈揭秘：优化方案大揭秘！随着互联网技术的发展，网站和应用程序的性能优化变得愈发重要。作为一款流行的PHP框架，Laravel在开发过程中可能会面临性能瓶颈。本文将探讨Laravel应用程序可能遇到的性能问题，并提供一些优化方案和具体的代码示例，让开发者能够更好地解决这些问题。一、数据库查询优化数据库查询是Web应用中常见的性能瓶颈之一。在

优化WIN7系统开机启动项的操作方法 优化WIN7系统开机启动项的操作方法 Mar 26, 2024 pm 06:20 PM

1、在桌面上按组合键(win键+R)打开运行窗口，接着输入【regedit】，回车确认。2、打开注册表编辑器后，我们依次点击展开【HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionExplorer】，然后看目录里有没有Serialize项，如果没有我们可以单击右键Explorer，新建项，并将其命名为Serialize。3、接着点击Serialize，然后在右边窗格空白处单击鼠标右键，新建一个DWORD(32)位值，并将其命名为Star

See all articles