终极优化篇 :
https://www.jeffjade.com/2017/08/06/124-webpack-packge-optimization-for-volume/
https://www.jeffjade.com/2017/08/12/125-webpack-package-optimization-for-speed/
一. 对路由懒加载
将所有类似 import Home from '@/components/home'; 替换为 const Home = () => import('@/components/home')
二. 组件懒加载
import HomeHeader from "./home-header"; 替换为 const HomeHeader = () => import("./home-header");
会增加文件数量,但是会减少单个文件大小
三. 进行analyze分析,将大的vendor进行CDN,
https://github.com/PanJiaChen/vue-admin-template/commit/746aff560932704ae821f82f10b8b2a9681d5177
注意
重要:
--- 不要把任何页面内容写到 body、head 外面; 那样app.js 插入到了你写的 script 的前面，获取不到 Vue。
1 highcharts.js 和 highstock.js不能同时使用,只使用highcharts即可,否则会报错: Highcharts error #16:
2 CDN的 script标签必须在body标签内使用,最好是在 #app 前面;
3 Vue.use(ElementUI, { locale }) 等 use 可删可不删,因为这些基于vue的插件会自动寻找vue实例,然后挂载上去;
4 import Vue from 'vue'; Vue.use(Router) 可以删除或者不删除
结构如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-admin</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@1.4.7/lib/theme-default/index.css">
</head>
<body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>
<!-- 引入依赖vue的组件库 -->
<script src="https://unpkg.com/element-ui@1.4.7/lib/index.js"></script>
<div id="app"></div>
<!-- built files will be auto injected,打包后的js等会插入到这里-->
</body>
</html>
如element-ui, vue, vue-router等,引入的时候注意：要先在引入element-ui之前引入VUE否则会报undedined prototype的错误
使用 CDN 引入依赖的用户在链接地址上锁定版本，以免将来升级时受到非兼容性更新的影响。
...
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
...
<body>
<div id="app"></div>
<!-- cdn 加速，减小 vendor.js 体积 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/babel-polyfill/6.26.0/polyfill.min.js"></script> // 放在最后
<!-- built files will be auto injected -->
</body>
在webpack.base.conf.js中对 webpack 配置中添加外部扩展, 然后这些依赖就不会被webpack打包,从而加快打包速度
module.exports = {
...
// 修改entry :
entry: {
// app: ['./node_modules/babel-polyfill/dist/polyfill.js', './src/main.js'] // 修改前
app: [ './src/main.js'] //修改后
},
// 外部扩展，通过 cdn 引入，不会被webpack打包
// let yyy = require('xxx') 或者 import yyy from 'xxx' ,以下就用 'xxx' : 'yyy' 的方式,yyy是插件暴露出来的名字
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'babel-polyfill': 'window', // window 是 关键之处
'element-ui':'ELEMENT' // 必须为 ELEMENT,否则会报错找不到element,因为elementUI外部库对外暴露的全局变量是'ELEMENT
}
}
其中对babel的处理,在webpack.base.conf.js中,应改为如下:
entry: {
// app: ['./node_modules/babel-polyfill/dist/polyfill.js', './src/main.js']
app: [ './src/main.js'] // 避免打包 polyfill
},
以下代码删除或者不删除都无影响,
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
