1.安裝插件npm install --save-dev @babel/plugin-syntax-dynamic-import
javascript
2.修改babel.config.js文件php
module.exports = { presets: [ '@vue/app' ], "plugins": [ [ '@babel/plugin-syntax-dynamic-import' ] ] }
3.vue.config.js增長以下配置,取消prefetch和preloadcss
chainWebpack(config) { config.plugins.delete('preload') config.plugins.delete('prefetch') }
1.安裝插件(指定版本爲@5.0.1,太高的版本會報錯:Cannot read property 'tapPromise' of undefined)html
npm i compression-webpack-plugin@5.0.1
2.修改vue.config.js前端
const webpack = require('webpack') const CompressionWebpackPlugin = require('compression-webpack-plugin') const productionGzipExtensions = ['js', 'css'] const isProduction = process.env.VUE_APP_ENV_NAME === 'production' module.exports = { configureWebpack: { plugins: [ new CompressionWebpackPlugin({ algorithm: 'gzip', test: /\.(js|css|less)$/, // 匹配文件名 threshold: 10240, // 對超過10k的數據壓縮 minRatio: 0.8, // deleteOriginalAssets: true // 刪除源文件 }) ], }, }
3.後端配置nginxvue
# gzip config gzip on; gzip_min_length 1k; gzip_comp_level 9; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on; gzip_disable "MSIE [1-6]\."; server { listen 80; # gzip config gzip on; gzip_min_length 1k; gzip_comp_level 9; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on; gzip_disable "MSIE [1-6]\."; root /usr/share/nginx/html; location / { # 用於配合 browserHistory 使用 try_files $uri $uri/ /index.html; # 若是有資源,建議使用 https + http2,配合按需加載能夠得到更好的體驗 # rewrite ^/(.*)$ https://preview.pro.loacg.com/$1 permanent; } location /api { proxy_pass https://preview.pro.loacg.com; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; } } server { # 若是有資源,建議使用 https + http2,配合按需加載能夠得到更好的體驗 listen 443 ssl http2 default_server; # 證書的公私鑰 ssl_certificate /path/to/public.crt; ssl_certificate_key /path/to/private.key; location / { # 用於配合 browserHistory 使用 try_files $uri $uri/ /index.html; } location /api { proxy_pass https://preview.pro.loacg.com; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; } }