This is the sixth day of my participation in Gwen Challenge

Background: Why optimize packaging

  • As the project gets bigger, it relies on more and more packages, the packaging file is too big, and the compilation time is too long
  • However, it takes a long time to load a page application on the first screen, resulting in poor user experience

Effect achieved

  • Reduce the size of packaged files
  • The home page loads import files on demand
  • Optimize WebPack packaging time

Optimize the way

According to the need to load

Routing components are loaded on demand
     const router = [{
     path: '/index',
     component: resolve => require.ensure([], () => resolve(require('@/components/index')))
     },
     {
      path: '/about',
      component: resolve => require.ensure([], () => resolve(require('@/components/about')))
     }
    ]
Copy the code
Third-party components and plug-ins. Load on demand Import third-party components
Import ElementUI from 'element-ui' import 'ElementUI /lib/theme-chalk/index.css' Vue. Use (ElementUI) // Import components as needed import { Button } from 'element-ui' Vue.component(Button.name, Button)Copy the code
Plugins that are only used in individual components can also be introduced in components on demand rather than in main.js
Import Vue from Vue import Vuelidate from 'Vuelidate' vue. use(Vuelidate) from 'vuelidate'Copy the code

Optimizing loader Configuration

  • Optimized regular matching
  • Enable caching with the cacheDirectory option
  • Reduce the number of files to be processed by include and exclude.
module: {
 rules: [
  {
   test: /\.js$/,
   loader: 'babel-loader?cacheDirectory',
   include: [resolve('src')]
  }
 ]
}
Copy the code

Optimize file path – save time searching for files

  • After the extension configuration, you don’t need to add file extensions to require or import.
  • After mainFiles is configured, the system does not add file names. The system tries to match the added file names
  • Alias enables WebPack to find modules faster by configuring an alias.
resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
 }
},
Copy the code

The production environment closes sourceMap

  • SourceMap is essentially a mapping relationship where the code in the packaged JS file can be mapped to the specific location of the code file. This mapping relationship helps us find errors directly in the source code.
  • Packaging slows down and production files get bigger, so the development environment uses sourceMap and the production environment shuts down.

Code compression

  • UglifyJS: Vue-CLI default code compression method, it uses single-threaded compression code, packaging time is slow
  • ParallelUglifyPlugin: Enable multiple sub-processes to compress files for multiple sub-processes
plugins: [ new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false } }, sourceMap: true, parallel: }), new ParallelUglifyPlugin({//cacheDir is used to configure the directory path where the cache is stored. '.cache/', sourceMap: true, uglifyJS: { output: { comments: false }, compress: { warnings: false } } }) ]Copy the code

Extract common code

  • The same resources are loaded repeatedly, wasting user traffic and increasing server costs.
  • Too many resources need to be loaded on each page. As a result, the first screen of a web page loads slowly, affecting user experience.
Module.exports = {optimization: {splitChunks: {cacheGroups: {vendor: {priority: 1, // add the weight test: /node_modules/, // remove chunks from this directory: 'initial', // remove minChunks from this directory: }, common: {// common module chunks: 'initial', minChunks: 2}}}}}Copy the code

CDN optimization

  • As the project grows, it relies on more and more third-party NPM packages, and the files it builds become larger and larger.
  • Coupled with single-page applications, this can lead to long periods of blank screens on slow Internet speeds or with limited server bandwidth.

1. Change vUE, VUE-Router, vuex, Element-UI and AXIos libraries to CDN links and insert corresponding links in index. HTML.

The < head > < link rel = "stylesheet" href = "https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" rel = "external Nofollow "/ > < / 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>Copy the code

2. In the webpack.config.js configuration file

Module. exports = {··· externals: {'vue': 'vue', 'vuex': 'vuex', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT', 'Axios':'axios' } },Copy the code

NPM uninstall axios element-ui vue vuex uninstall axios element-ui vue vuex

// import Vue from 'vue' // import ElementUI from 'element-ui' // import 'element-ui/lib/theme-chalk/index.css' // import VueRouter from 'vue-router' import App from './App.vue' import routes from './router' import utils from './utils/Utils' Vue.use(ELEMENT) Vue.use(VueRouter) const router = new VueRouter({ mode: 'hash', // routes}) new Vue({router, el: '#app', render: h => h(app)})Copy the code

conclusion

Practical methods: load on demand, optimize loader configuration, close production environment sourceMap, CDN optimization. Vue-cli optimization: code compression, extraction of common code, not much room for further optimization. According to the actual needs of the project and their own development level to choose the optimization method, must avoid the optimization of bugs.