一、路由懒加载
1、作用
晋升用户体验，晋升首屏组件加载速度，解决白屏问题
2、代码示例
2.1 未应用路由懒加载
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ]})2.2 应用路由懒加载
import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'HelloWorld', // 办法一：vue异步组件实现 // component: resolve => (require(['@/components/HelloWorld'], resolve)) // 办法二：import办法(罕用) component: () => import('@/components/HelloWorld') } ]})二、组价懒加载
1、代码示例
1.1 本来写法
<template> <div class="hello"> <hello-world></hello-world> 111 </div></template><script> import HelloWorld from './HelloWorld' export default { components: { HelloWorld }, data() { return { msg: 'this is Vue App' } } }</script>1.2 组件懒加载写法
<template> <div class="hello"> <hello-world></hello-world> 111 </div></template><script>export default { components: { // 办法一 'HelloWorld': () => import('./HelloWorld'), // 办法二 // HelloWorld': resolve => (['./HelloWorld'], resolve) }}</script>三、通过线上引入CDN链接
1、找到我的项目中的index.html文件
<script src='https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.min.js'></script>2、配置webpack.base.conf.js
在module.exports中退出以下代码
externals: { // 键：示意导入包语法from前面跟着的名称 // 值：示意script引入js文件时，在全局环境中的变量名称 vue: 'Vue', axios: 'axios', 'vue-router': 'Router'}四、gzip暴力压缩
1、nginx开启gzip模式
server { listen 8103; server_name ***; # 开启gzip gzip on; # 进行压缩的文件类型 gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/png image/gif; # 是否在http header中增加Vary: Accept-Encofing,倡议开启 gzip_vary on;}2、Vue开启gzip
2.1 装置依赖
npm install compression-webpack-plugin@1.1.12 --save-dev
2.2 配置gzip
config --> index.js
build: { productionGzip: true, productionGzipExtensions: ['js', 'css']}五、拓展：剖析文件大的起因
利用webpack-bundle-analyzer分析器，剖析我的项目依赖关系
build --> webpack.prod.conf.js
const BunldeAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;plugin: [ new BunldeAnalyzerPlugin(),]而后运行npm run build打包命令，浏览器会呈现如下页面，此时咱们就能看到哪些文件外面到底蕴含了什么货色