vue启动页优化,app.js/vender.js过大

张旭超

image.png
只需要在运行打包命令的后面加上"--report",完成以后就会跳转到127.0.0.1:8888如上界面,然后根据界面分析修改。

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 [email protected]

后台也需要配置,我们后台是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)

但是做了模块懒加载以后,就会报错,说是没有引入统计图的模块
作如下改动

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静态导入

这里使用www.jsdelivr.com CDN网站,速度快,具体说明可以看这篇文章:https://www.bilibili.com/read...

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/styles/iview.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.core.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.bubble.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_946160_ugxj3soemml.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/iview.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-quill-editor.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/locale/zh-cn.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-socketio.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/map/js/china.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-wordcloud.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <title>帮瀛</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

image.png
image.png

阅读 3.4k
avatar
张旭超
前端开发工程师

精通 html+div+css jquery, vue, angularjs, angular2, angular4, ionic, ionic2

1.3k 声望
213 粉丝
0 条评论
avatar
张旭超
前端开发工程师

精通 html+div+css jquery, vue, angularjs, angular2, angular4, ionic, ionic2

1.3k 声望
213 粉丝
文章目录
宣传栏