• background

    At first, the optimization was carried out because the first screen of the project was loaded too long in the test environment, and the test students joked about it, and then started to optimize it. As soon as possible, the optimization is very important for user experience.

  • Analysis of the status quo

    Projects are usedVue – cli4.5Version, belowdevlopmentThe packaged structure of the environment

    ├ ─ dist

    │ ├ ─ assets

    │ │ └ ─ js

    │ │ ├ ─ app. Js

    │ │ └ ─ the chunk – vendors. Js

    │ ├ ─ the favicon. Ico

    │ └ ─ index. HTML

The volume before optimization adds up to 5.43m, which is quite large

Colleague Amway bought onewebpack-bundle-analyzerArtifact analysis code, you can intuitively see the dependencies and size of the file. The following tool analysis diagram, tool usage by yourself to see the documentation. It’s recommended.

App.js is mostly business related code. Size: 3.56m chunk-vendors. Js is mainly a set of third party dependent files. Size: 1.83m Tool debugging code is as follows, only for reference:

 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    plugins.push(new BundleAnalyzerPlugin(
      {
        analyzerMode: 'server'.analyzerHost: '127.0.0.1'.analyzerPort: 8889.reportFilename: 'report.html'.defaultSizes: 'parsed'.openAnalyzer: true.generateStatsFile: false.statsFilename: 'stats.json'.statsOptions: null.logLevel: 'info'}))Copy the code

I asked my colleague that the test environment was convenient for debugging. Instead of lazy loading of routes, require mode was used to import routes and lazy loading of dynamic switching routes was used in production. Because I don’t have much experience in packaging optimization, I went crazy to Baidu, consulted webpack documents and VUE-CLI documents, and debugging relevant information.

Here are some of the issues analyzed and observed:

  1. Area.js is stored in the resource server

There are many area.js files due to special business reasons, which need to dynamically switch the level of provinces and counties. The area directory also has 215K.

After area optimization:

  1. The third-party plug-in CDN is imported

Modify vue.config.js chainWebpack configuration vue.config.js file

 // Third party library CDN external introduction, reduce packaging volume
      config.set('externals', {
        vue: "Vue".'vue-router': 'VueRouter'.vuex: 'Vuex'.axios: "axios".swiper: 'Swiper'.vant: 'vant'
      })
Copy the code

HTML

<! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Name ="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" /> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="stylesheet" href="//at.alicdn.com/t/font_2423676_hx4ccbq3p0r.css"> <link rel="stylesheet" Href = "https://unpkg.com/[email protected]/css/swiper.css" / > < link rel = "stylesheet" Href = "https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css" / > < script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js" > < / script > < script SRC = "https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/axios/0.18.0/axios.min.js" > < / script > <! - the introduction of Vue and Vant JS file -- > < script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js" > < / script > < script SRC = "https://unpkg.com/[email protected]/js/swiper.js" > < / script > < script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper/dist/vue-awesome-swiper.js"></script> <script type="text/javascript"> Vue.use(window.VueAwesomeSwiper); </script> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <! - built files will be auto injected -- > < / body > < script SRC = "https://res2.wx.qq.com/open/js/jweixin-1.2.0.js" > < / script >  </html>Copy the code

After optimization:

Dude: Vender.js is 700 + k less

  1. Zip code, currently only in production to do compression, local debugging is not convenient to compress configureWebpack added to the code

 config.mode = 'production'
      let prodPlugins = [
        / / js/CSS/HTML
        new CompressionPlugin({
          // filename: '[path].gz[query]',// destination filename
          // algorithm: 'gzip',// use gzip compression
          test: /\.js$|\.html$|.\css/.// Match the file name
          threshold: 10240.// Compress data over 10K
          minRatio: 0.8.// Only resources with compression rates lower than this value will be processed
          deleteOriginalAssets: true // Do not delete the source file})]Copy the code
  1. To delete prefetch, see vuE-CLI configuration and chainWebpack
// Remove the prefetch plug-in to avoid occupying excessive bandwidth
config.plugins.delete('prefetch');
Copy the code
  1. Remove console.log, current production open chainWebpack changes
  // Remove the console.log code
    if(process.env.NODE_ENV === 'production') {
      config.optimization
      .minimizer('terser')
      .tap(args= > {
        Object.assign(args[0].terserOptions.compress, { // Production mode console.log is removed
          // warnings: false, // default false
          // drop_console: ,
          // drop_debugger: true, // default is true
          pure_funcs: ['console.log']})return args
      })
    }
Copy the code

The effect is currently only visible in production, because after local packaging, it is found that the generated files are not prefetch, so production will be all prefeth chuck blocks at once.

  • The production environment effect goes up

Mainly in terms ofThe production environmentTake a look at the effect before and after optimization

Before optimization: 1.14m

Optimized: 725.11 KB

The production size is optimized to 414.89KB, and the effect is still there.

  • conclusion

    After this project optimization, I have a better understanding of Webpack configuration and learned a lot. Such as routing lazy loading, how development and production environments trade off optimization. There is still a long way to go and a lot to learn. If you think it helps, please give it a thumbs up.