1、設置路由懶加載
import?Vue?from?'vue'
import?Router?from?'vue-router'
Vue.use(Router)
const?index=?r?=>?require.ensure([],?()?=>?r(require('@/views/index')),?'index');
export?default?new?Router({
? ???mode:?'history',
? ? ? ?routes:[
? ? ? ? ? ? {
? ? ? ? ? ? ? ? path: ' ',
? ? ? ? ? ? ? ? component: index
????????????}
? ? ? ? ]
})
2、在index.html中放入引用的公共包（如vue,vuex,elementui。。。）
<!DOCTYPE?html>
<html>
<head>
? ?? <meta?charset="utf-8">
? ?? <meta?http-equiv="X-UA-Compatible"?content="IE=edge">
? ?? <meta?name="viewport"?content="width=device-width,initial-scale=1.0">
? ?? <link?rel="icon"?href="<%=?BASE_URL?%>favicon.ico">
? ?? <title>Signal?Supervisor</title>
</head>
<body>
? ?? <div?id="app"></div>
? ?? <script type="text/javascript" src="<%= BASE_URL %>js/vue.min.js"></script>
? ?? <script type="text/javascript" src="<%= BASE_URL %>js/vuex.min.js"></script>
</body>
</html>
3、開啟GZIP
當項目較大時往往會出現(xiàn)打包之后首屏加載時間較長，這樣會導致用戶體驗較差，因此可以開啟gzip壓縮功能
1）如果是vue2.x，在vue項目中安裝依賴并將config.js中的productionGzip改為true，開啟Gzip壓縮，npm install --save-dev compression-webpack-plugin
運行npm run build 打包項目，這時如果有提示報錯ValidationError: Compression Plugin Invalid Options，則需要將build中的webpack.prod.conf.js中CompressionWebpackPlugin的設置由asset改為
filename，如圖所示
再次運行npm run build打包，如果還有報錯，提示TypeError: Cannot readproperty 'emit' of undefined。據(jù)我查證，是安裝的compression-webpack-plugin依賴有問題，需要卸載compression-webpack-plugin更改安裝低版本：npm install --save-dev compression-webpack-plugin@1.1.2
最后再次打包
當發(fā)現(xiàn)打包文件中有很多.gz的文件時即是打包成功，最后后端服務器開啟gzip配置就愉快的配置完成，再次打開地址后會發(fā)現(xiàn)首屏速度快了很多
2）? 如果是vue-cli3的項目，在開啟gzip時會稍有區(qū)別，在vue.config.js 中配置，先安裝依賴cnpm?i?-D compression-webpack-plugin
const CompressionPlugin = require('compression-webpack-plugin');
configureWebpack: config => {
? ?? if (process.env.NODE_ENV === 'production') {
? ?????? return{
? ?????????? plugins: [
? ?????????????? new CompressionPlugin({
? ??????????????????????algorithm: 'gzip',//開啟gzip
? ? ? ? ? ? ? ? ? ? ?????test: /\.js$|\.html$|.\css/, // 匹配文件名
? ?????????????????????? threshold: 10240, // 對超過10k的數(shù)據(jù)壓縮
? ???????????????????????deleteOriginalAssets: false // 不刪除源文件
? ? ? ? ? ? ? ? ? ? })
? ?????????????? ]
? ? ? ? ? ? ?? }
? ?????????? }
? ?? }?
? ??
