By 朱阳星

文章目录
  1. 1. 生产包分析

生产包分析

打包发现vendor.js文件非常大，开始分析

解决方案
1.所有路由组件均动态加载

1
2
3
import Hello from '@/components/Hello';
// 替换为如下写法
const Hello = () => import('@/components/Hello');

2.使用npm run build --report查看各包占用大小
2.1如moment可以只选择自己需要的语言包（GZIP后的60.46K–>17.32K）

1
2
3
4
5
// 
new webpack.ContextReplacementPlugin(
  /moment[\\\/]locale$/,
  /de|fr|hu|zh-cn/
)

2.2如lodash只打包用到的函数模块 (GZIP后的 24.42K—>1.85K 与使用模块数有关)

1
2
#安装相关组件
npm i -S lodash-webpack-plugin babel-plugin-lodash

1
2
3
4
5
// build/webpack.base.conf.js
+ var LoadshModuleReplacementPlugin = require('lodash-webpack-plugin')
  plugins: [
+        new LoadshModuleReplacementPlugin()
  ],
1
2
3
4
// .babelrc
"plugins": [
+    "lodash"
],

使用方法跟原来一样

1
2
import _ from 'lodash'
_.add(1, 2) // 打包时只会引入这一个函数模块

3.css文件分片
现在所有的css文件都在app.sha1.css，未找到解决方案。
看配置里已经写了，配置的目的是把所有.vue文件里的style部分抽取出来经过预处理器处理完后合并到app.sha1.css文件里
这里有详细说明
但是script引入的样式文件需要单独处理

1
2
3
4
5
6
7
8
9
// build/utils.js
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

目的是about模块有about.css,index模块有index.css
在访问到index时加载index.css
访问到about.css时才加载about.css
并不是一次把所有css文件都加载

文章目录
  1. 1. 生产包分析