This is the 28th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Today, I published the blog system I developed online, but I just threw the dist folder I built into the root directory of the cloud server. As a result, it was very slow to enter the page for the first time. So you need to optimize.

According to their own Baidu results, as well as the help of super brother to do the following several optimization

Size before optimization

1. Image optimization

Before, in order to make it easier to open, I threw a JPG in the background image directly into assets, which led to the loading of this image took more than ten seconds, so I uploaded the image to the space, and then changed to the network address.

2. Do not generate. Map files

The dist folder in build contains many. Map files, which are used to debug code online and view styles. Since it is basically local debugging, there is no need to modify online, so it is forbidden to generate these files.

Add this sentence to vue.config.js.

3. Lazy route loading

\

4. CDN introduces public libraries

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
Copy the code

    / / the CDN
    configureWebpack: {
        externals: {
            'vue': 'Vue'.'element-ui': 'ELEMENT'.'vue-router': 'VueRouter'.'vuex': 'Vuex'.'axios': 'axios'}}Copy the code

It is said on the Internet that you can comment out the import, but you will get an error if you operate it yourself. There is also information that you will not pack without comments

After a quick operation on the final file, the effect is remarkable, but app.js is still large

5. GZIP compression

It feels like the first four steps are a piece of cake. You can directly dry 1.4m app.js into more than 100 KB, and the rest is nothing to worry about

 configureWebpack: config= > {
        return {
            / / configure the CDN
            externals: {
                'vue': 'Vue'.'element-ui': 'ELEMENT'.'vue-router': 'VueRouter'.'vuex': 'Vuex'.'axios': 'axios'
            },
            // Configure gzip compression
            plugins: [
                new CompressionWebpackPlugin({

                    test: new RegExp('\.(js|css)$'),
                    threshold: 10240.minRatio: 0.8}}})],Copy the code

The server side also needs to be configured, otherwise the GZIP file will not be recognized

// Configure the GZIP compression module
const compression = require('compression');
// Before any middleware
app.use(compression());
Copy the code

The most garbage server through the above several optimization, as fly up!!

Compare this and the results are obvious!!