20171212_生产包分析

[openks]

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

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

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

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

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

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

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

// build/webpack.base.conf.js
+ var LoadshModuleReplacementPlugin = require('lodash-webpack-plugin')
  plugins: [
+        new LoadshModuleReplacementPlugin()
  ],

// .babelrc
"plugins": [
+    "lodash"
],

使用方法跟原来一样

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

3.css文件分片