webpack优化推荐-vue项目总结 webpack通用打包优化方案

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

因为一个新项目的发布打包时间需要30分钟左右，发布时间严重拖慢了工作时间，所以特地查阅了相关文档，优化了打包速度，争取早点上班，^_^。

分析打包文件

要优化，首先要分析。 我们首先要知道是什么拖慢了我们的打包速度？

打包后生成文件分析

可以使用webpack-bundle-analyzer插件来分析我们打包后生成的文件。

安装

npmiwebpack-bundle-analyzer-D

使用

更改 webpack.prod.conf.js 文件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
// 构建完成后，浏览器会自动打开localhost:8080
webpackConfig.plugins.push(
 new BundleAnalyzerPlugin({
  analyzerPort: 8080,
  generateStatsFile: false
 })
)

通过图片可以看到打包文件的详细信息。

显示打包进度条，可查看打包进度比例

simple-progress-webpack-plugin 可以显示打包比例

安装

npm i simple-progress-webpack-plugin -D

使用

更改 webpack.prod.conf.js 文件

const SimpleProgressWebpackPlugin = require( 'simple-progress-webpack-plugin' )
...
 plugins: [
  new SimpleProgressWebpackPlugin()
 ]
...

疗效如下：

资源及依赖包控制

从前面的进度可以看出，在打包过程中，压缩区域的滞后时间过长。 当项目变得越来越臃肿时webpack优化推荐，我们需要整理项目的静态资源和依赖包。

如果图像太大，可以对其进行压缩。 这里推荐一个不错的压缩链接。

缩小文件搜索范围

设置resolve.alias数组，防止打包时使用相对路径访问或者导入文件时，解析文件被逐层查找。

resolve: {
 alias: {
  '@': resolve('src')
 }
}

合理配置扩展扩展

只有resolve.extensions可以手动解析某些扩展，如果扩展太多，会导致解析过程过多，所以我们需要合理配置扩展，不要配置太多扩展。 对于引用很多文件的项目，扩展名应该放在上面，我们的项目大部分都是vue和js文件，只能引用这两个。

resolve: {
 extensions: ['.vue', '.js']
}

加载器预处理文件减少包含以匹配特定条件

在预处理各种文件时指定匹配目录后，webpack在解析文件时就不会循环遍历其他目录，提高了解析速度。

happypack多线程执行

Webpack 在单个线程中执行预处理的文件。 我们可以使用happypack来多线程处理文件。

安装

npmihappypack-D

使用

更改 webpack.base.js 文件

const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
module: {
 rules: [
  {
   test: /.js$/,
   loader: 'happypack/loader?id=babel', // 原始loader替换成`happypack/loader`
   include: [resolve('src')]
  }
 ]
},
plugins: [
 new HappyPack({
  // id标识 需要处理的loader
  id: 'babel',
  // loader配置和原始配置一样
  loaders: [
   {
    loader: 'babel-loader',
    options: {
     presets: ['es2015'],
     cacheDirectory: true
    }
   }
  ],
  threadPool: happyThreadPool
 })
]

babel-plugin-dynamic-import-node 异步加载

babel-plugin-dynamic-import-node插件将import()替换为require编译

安装

npmababel-插件-动态-导入-节点-D

使用

更改 .babelrc 文件

"env": {
 "development": {
  "plugins": ["dynamic-import-node"]
 },
 "production": {
  "plugins": ["dynamic-import-node"]
 }
}

注意：使用插件构建后没有 chunkfiles 文件。

总结

经过上述优化后，项目打包时间从30分钟缩短到2分钟。 整体还有优化空间，可以使用cdn、dll等其他优化方法。

以上就是小编给大家介绍的Vue项目的总结。 希望对您有所帮助。 如果您有任何疑问webpack优化推荐，请给我留言，编辑会及时回复您。 也非常感谢您对Script House网站的支持！