webpack打包优化的几个方法总结

2024-05-06 15:44:19

字体：大中小

来源：转载

供稿：网友

为什么要优化打包？

项目越做越大，依赖包越来越多，打包文件太大单页面应用首页白屏时间长，用户体验差

我们的目的

减小打包后的文件大小首页按需引入文件优化 webpack 打包时间

优化方式

1、按需加载

1.1 路由组件按需加载

const router = [ {  path: '/index',  component: resolve => require.ensure([], () => resolve(require('@/components/index'))) }, {  path: '/about',  component: resolve => require.ensure([], () => resolve(require('@/components/about'))) }]

1.2 第三方组件和插件。按需加载需引入第三方组件

// 引入全部组件import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)// 按需引入组件import { Button } from 'element-ui'Vue.component(Button.name, Button)

1.3 对于一些插件，如果只是在个别组件中用的到，也可以不要在 main.js 里面引入，而是在组件中按需引入

// 在main.js引入import Vue from vueimport Vuelidate from 'vuelidate'Vue.use(Vuelidate)// 按组件按需引入import { Vuelidate } from 'vuelidate'

2、优化 loader 配置

优化正则匹配通过 cacheDirectory 选项开启缓存通过 include、exclude 来减少被处理的文件。

module: { rules: [  {   test: //.js$/,   loader: 'babel-loader?cacheDirectory',   include: [resolve('src')]  } ]}

3、优化文件路径——省下搜索文件的时间

extension 配置之后可以不用在 require 或是 import 的时候加文件扩展名,会依次尝试添加扩展名进行匹配。 mainFiles 配置后不用加入文件名，会依次尝试添加的文件名进行匹配 alias 通过配置别名可以加快 webpack 查找模块的速度。

 resolve: {  extensions: ['.js', '.vue', '.json'],  alias: {   'vue$': 'vue/dist/vue.esm.js',   '@': resolve('src'),  } },

4、生产环境关闭 sourceMap

sourceMap 本质上是一种映射关系，打包出来的 js 文件中的代码可以映射到代码文件的具体位置,这种映射关系会帮助我们直接找到在源代码中的错误。打包速度减慢，生产文件变大，所以开发环境使用 sourceMap，生产环境则关闭。

5、代码压缩

UglifyJS: vue-cli 默认使用的压缩代码方式，它使用的是单线程压缩代码，打包时间较慢 ParallelUglifyPlugin: 开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成

两种方法使用如下：

plugins: [ new UglifyJsPlugin({  uglifyOptions: {   compress: {    warnings: false   }  },  sourceMap: true,  parallel: true }), new ParallelUglifyPlugin({  //缓存压缩后的结果，下次遇到一样的输入时直接从缓存中获取压缩后的结果并返回，  //cacheDir 用于配置缓存存放的目录路径。  cacheDir: '.cache/',  sourceMap: true,  uglifyJS: {   output: {    comments: false   },   compress: {    warnings: false   }  } })]

上一篇：node.js使用http模块创建服务器和客户端完整示例

下一篇：详解Vue template 如何支持多个根结点