Table of contents
1. The difference between the production environment and the test environment
3. ngix + webpack compressed files
4. Finally, post all vue.config.js file configurations
Foreword:
After more than half a year, the system is finally about to jump out of the sea of suffering, and it is ready to be put into use online. Good guy, the server is so slow, what should I do? Panicked, is there too many bugs? ! ? In addition to entanglement, I decided to find the problem and just do it. The following methods are for reference only and may not be universal.
Check out the final results
1. The difference between the production environment and the test environment
- It is found that the production environment is always very slow, and the test environment will be much faster. Not to mention f12, it is found that the entry file app.js and the dependency package chunk-vendors.js of the production environment are much larger
- Then look for the packaging command, good guy, the production environment actually wrote a dell configuration file by itself, using the following configuration, and the test environment comes with vue-cli. Using a violent method (replacing the internal structure of the command file), the instant speed is not a grade
2. Routing rectification
- Open the browser request, find the request. The following picture appears, the obsessive-compulsive disorder patient, the picture causes extreme discomfort (oh my god, where am I, who am I)
- It can be ignored here for the time being: the code written by this great master is full of phone numbers, and the sorting is neat, but I don’t know which module it is. The following provides two repair methods
// 方法一 ：webpack别名配置 添加/* webpackChunkName: "Home" */ 后面对应的就是重命名的名称
{
path: "/index",
name: "Home",
component: () => import(/* webpackChunkName: "Home" */ "@/views/Home.vue"),
meta: { title: "首页", affix: true }
},
// 方法二 ：node配置 require.ensure函数 此法不推荐，看着就眼花缭乱
{
path: "/index",
name: "Home",
component:
resolve => require.ensure([],
() => resolve(require('@/views/Home.vue')), 'Home'),
meta: { title: "首页", affix: true }
},
- There are so many module js, it seems that all of them have been introduced. Could it be that there is no lazy loading of routes? ! But after reading the code, it is indeed a lazy loading method, so what is the problem?
- Right-click on the browser, open the source code, and view the following code. It is actually imported globally. There is a prefetch (preloading of vue-cli3). Good guy, let’s kill you first.
- Add the following configuration to the vue.config.js file
chainWebpack: config => {
// 删除预加载
config.plugins.delete('preload');
config.plugins.delete('prefetch');
},- Close the service, recompile (npm start or other), and check again, it is indeed removed, clear and clear, and the speed is several seconds faster
3. ngix + webpack compressed files
After this method, each js/css/picture can be compressed. Form a .gz mapping file
3.1 Front end
- Here first install the webpack compressed package
npm install --save-dev compression-webpack-plugin- Then execute the packaging and try, the following error may occur, this is because of the version of the package, you can install the latest package npm install --save-dev [email protected]
ERROR TypeError: Cannot read property 'tapPromise' of undefined
TypeError: Cannot read property 'tapPromise' of undefined- The packaged file will have a mapping file .gz, which means that the front end has been successful
3.2 Backend
The ngix on the backend needs to add the following compatible settings
server {
listen 8093; #监听端口
server_name localhost; #negix服务名
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]\.";
location /fdk-erp-mig {
proxy_pass http://192.168.1.245:8080/fdk-erp-mig;
}
location / {
root html/Mig-RefactorFDK;
index index.html; #首页 按出现顺序检查加载
}
}
After the above two steps are executed, the code has been significantly reduced. If the loading of the home page is still slow, you need to consider whether it is a server response problem, or the front-end entry file main.js has a lot of things mounted globally.
If main.js is still very large, you need to import the things that are mounted globally in the components according to your individual needs.
ps: Import components on demand, it is best to use the following method to import
const SelectJobDialog = resolve =>
require(["@/components/SelectJobDialog.vue"], resolve); // 此处按需加载组件4. Finally, post all vue.config.js file configurations
/*
* @ModuleName: vue.config.js
* @Author: liuxin
* @Date: 2021-03-30 16:31:57
* @LastEditors: liuxin
* @LastEditTime: 2021-03-30 16:36:27
*/
const path = require("path");
const CompressionWebpackPlugin = require("compression-webpack-plugin"); //引入压缩插件
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; //匹配此 {RegExp} 的资源
module.exports = {
lintOnSave: false,
productionSourceMap: false, // 去除源码映射
publicPath: process.env.NODE_ENV === "development" ? "/" : "./",
// 开发环境及代理配置
devServer: {
open: true,
port: "9999",
proxy: {
"/api": {
// 代理地址
target: "此处自行修改代理地址，防止跨域",
changeOrigin: true,
ws: true,
pathRewrite: {
"^/api": "" // 路径重写
}
}
}
},
pluginOptions: {
"style-resources-loader": {
preProcessor: "scss",
patterns: [
// 需要全局导入的scss路径
path.resolve(__dirname, "./src/assets/styles/vars.scss"),
path.resolve(__dirname, "./src/assets/styles/global.scss")
]
},
},
outputDir: process.env.outputDir, // 打包生成的文件夹名称
chainWebpack: config => {
// 删除预加载
config.plugins.delete('preload');
config.plugins.delete('prefetch');
},
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
//[file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
// filename: '[path].gz[query]', // 提示[email protected]的话asset改为filename
//可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
algorithm: 'gzip',
//所有匹配该正则的资源都会被处理。默认值是全部资源。
test: productionGzipExtensions, //处理所有匹配此 {RegExp} 的资源
//只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
threshold: 10240,
//只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
minRatio: 0.8
})
]
},
};