标签：

vue-cli3 webpack优化 . 开启Gzip压缩

vue.config.js

webpack配置

安置包
npm install compression-webpack-plugin -D

const CompressionWebpackPlugin = require('compression-webpack-plugin') module.exports = { configureWebpack: config => { // 开发环境不需要gzip if (process.env.NODE_ENV !== 'production') return config.plugins.push( new CompressionWebpackPlugin({ // 正在匹配需要压缩的文件后缀 test: /\.(js|css|svg|woff|ttf|json|html)$/, // 大于10kb的会压缩 threshold: 10240, // 其余配置检察compression-webpack-plugin }) ) } } 处事端配置 开启gzip

添加gzip_static on; #静态压缩

location / { root /med/dist; index /index.html; try_files $uri $uri/ /index.html; gzip_static on; #静态压缩 } } .组件按需加载 elementUI

安置

npm install babel-preset-env -D npm install babel-plugin-component -D

babel.config.js

plugins: [ [ 'component', { 'libraryName': 'element-ui', 'styleLibraryName': 'theme-chalk' } ] ]

main.js 按需引入

import Vue from 'vue'; import { Dialog, Input, Button, Table, TableColumn, Tooltip, ... Loading, Message, } from 'element-ui'; Vue.use(Dialog); Vue.use(Input); Vue.use(Button); Vue.use(Table); Vue.use(TableColumn); Vue.use(Tooltip); ... Vue.use(Loading.directive); Vue.prototype.$loading = Loading.service; Vue.prototype.$message = Message; 路由懒加载 { name: 'collectioner_video_list', path: 'ownerOrder', // component: ownerOrder, component: resolve => require(['@/pages/moniterCenter/ownerOrder'], resolve), meta: { requiresAuth: true } }

webpack打包优化

，