解決vue?app.js/vender.js過大優(yōu)化啟動頁

更新時間：2023年10月26日 11:46:52 作者：張旭超

這篇文章主要為大家介紹了解決vue?app.js/vender.js過大優(yōu)化啟動頁過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

正文

只需要在運行打包命令的后面加上"--report"，完成以后就會跳轉到127.0.0.1:8888如上界面，然后根據(jù)界面分析修改。

npm run build --report

1、路由懶加載

import Home from '@/components/Home'

修改為

const Home = () => import('@/components/Home')

2、開啟gzip功能

打開/config/index.js文件

productionGzip: true,

安裝

npm install --save-dev compression-webpack-plugin

如果報錯

npm install --save-dev compression-webpack-plugin@1.1.11

后臺也需要配置，我們后臺是nginx

nginx.conf配置文件中修改

http {
    gzip on;
    gzip_disable "msie6";
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 8;
    gzip_buffers 16 8k;
    gzip_min_length 100;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript;
    }

重啟

systemctl reload nginx.service
   systemctl restart nginx.service

3、插件模塊組件按需加載

element-ui，iView等模塊用的哪個模塊的時候導入

這里遇到vue-echarts插件問題，沒有做路由模塊懶加載的時候，只需要如下

import Echarts from 'vue-echarts'
Vue.components('chart', Echarts)

但是做了模塊懶加載以后，就會報錯，說是沒有引入統(tǒng)計圖的模塊

作如下改動

import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/map/js/china'
...
const ECharts = () => import('vue-echarts')
Vue.component('chart', ECharts)

4、使用CDN或者static靜態(tài)導入

這里使用www.jsdelivr.com CDN網(wǎng)站，速度快具體說明

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet"  rel="external nofollow" >
    <link rel="stylesheet"  rel="external nofollow" >
    <link rel="stylesheet"  rel="external nofollow" >
    <link rel="stylesheet"  rel="external nofollow" >
    <link rel="stylesheet"  rel="external nofollow" >
    <link rel="stylesheet"  rel="external nofollow" >
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.1/dist/vue-router.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/iview@3.5.4/dist/iview.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.27.0/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.27.0/locale/zh-cn.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-socket.io@3.0.7/dist/vue-socketio.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/map/js/china.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@1.1.3/dist/echarts-wordcloud.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>
    <title>幫瀛</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>