Problem background: 1 It takes 2min to load the page for the first time. If it cannot be opened for half a day, a white screen will appear. After optimization, it will become 30s
2. The file after build is too large, such as a main JS file is 7.9M before optimization and 1.5M after optimization
3. Other js various alarms and exceptions
Problem solution:
1. Because the project is too old and not maintained, many packages are unusable
When installing dependency, various problems will occur. Download the latest version and delete the old version
Although it will be a lot, it will be great after it is solved
2. Install the plug-in, compression webpack plugin
cnmp i compression-webpack-plugin -D
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// Modify configuration for production environment
config.mode = 'production'
return {
plugins: [new CompressionPlugin({
test: /\.js$|\.html$|\.css/, //Match file name
threshold: 10240, //Compress data over 10k
deleteOriginalAssets: false //Delete original file
})]
}
}
3. Because it is vue/webpack, the core used in compilation depends on babel
Replace the plug-in starting with @ babel, that is, upgrade to babel 7 x ，
For plug-ins that do not start with @ babel, find the github or npmjs official website where the specific plug-in is located. See the instructions,
For example, when @ babel/preset-es2015 was installed, it was warned when it was packaged, so there was a prompt text when you found its official:
As of Babel v6, all the yearly presets have been deprecated. We recommend using @babel/preset-env instead.
Then @ Babel / preset es2015 and @ Babel / preset env should not exist at the same time,
Finally, for in The presets and plugins of babel referenced in babelrc or webpack should be replaced accordingly
4. After the release and operation, it is found that there are errors in js. Locate the specific vue or js file for analysis. Why the errors are made, break them one by one
5. Configure Vue config. JS file
productionSourceMap:false
module.exports = {
outputDir: `${srcFile}`, // Directory of files generated during npm run build type:string, default:'dist'
productionSourceMap: false, // Whether to generate the sourceMap file when building the production package. false will improve the construction speed
}
Otherwise, some map files will appear in the final packaged file. The function of the map file is that after the project is packaged, the code is compressed and encrypted. If an error is reported during operation, the output error information cannot accurately know where the code is reporting an error.
With a map, you can output exactly which row and column are wrong like unencrypted code.
If you don't turn it off, the production environment can see the source code through the map file.
6. In the above, it takes 2min to optimize to 30s, but there is still a lot of optimization space within 10s,
1. You can remove useless js files and 404 files, because 404 will run and occupy time
2. It can be loaded by routing,
3. On demand loading of components, element UI
4. The component reference method can be replaced with cdn,
<head> <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" /> </head> <body> <div id="app"></div> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script> <!-- built files will be auto injected --> </body>
There are still good ways to leave a message for discussion. The following items have not been tried one by one, but reasoning can play some role