Vue project optimization packaging-front-end bonus items

Preface
After the development of the Vue project, before the project is packaged and released, the indispensable operation is project optimization, which is also a bonus item for programmers. Follow the steps of this article to see how to optimize the project~

One, routing lazy loading

1. Why do you need routing lazy loading
   When I first ran the project, I found that when I entered the page, all the js files and css files were loaded in. This process was very time consuming. If the js file and css file of the response page are loaded corresponding to which page is opened, the page loading speed will be greatly improved.
2. How to implement routing lazy loading
   Vue official document: The routing lazy loading code is as follows (example):

{
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
复制代码

3. Magic notes in routing lazy loading
   You can customize the name of this file by specifying webpackChunkName in the comment. The code is as follows (example):

components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue")
复制代码

2. Analyze the package size

1. need
   I want to know how much space each file occupies in the files generated by packaging. So that we can analyze and optimize the code.
2. How to generate packaged analysis files
   Run npm run preview - --report in the terminal, this command will perform dependency analysis from our entry main.js, and analyze the size of each package. Finally, a report.html file will be generated in the generated dist folder. After opening it, you can see the space occupied by the files we use in the project~

(The renderings are as follows:)

Three, webpack configuration excludes packaging

1. need
   Exclude some infrequently used packages from the generated packaging files. For example: the xsxl.js and element.js shown in the figure above can be excluded from the packaged files
2. Exclude packaging
   Find vue.config.js and add the externals item, as follows:

The code is as follows (example):

configureWebpack: {
  // 配置单页应用程序的页面的标题
  name: name,
  externals: {
     /**
      * externals 对象属性解析。
      *  基本格式：
      *     '包名' : '在项目中引入的名字'
      *  
    */
    'vue': 'Vue',
    'element-ui': 'ElementUI',
    'xlsx': 'XLSX'
  },
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}
复制代码

Four, citing network resources

1. need
   After we performed the previous step, the package generated after packaging is much smaller. However, without these dependent packages, there is no way to run the project online. Then we need to reference the resources in the network to support the operation of our code.
2. CDN
   The full name of CDN is "Content Delivery Network", and the Chinese is called Content Delivery Network. We use it to increase access speed
   Put some static resources: css, .js, pictures, and videos on a third-party CDN server to speed up the access speed.
   benefit:

Reduce the package size of the application package
Speed up access to static resources
Use browser caching, long-term caching of unchanging files

3. Implementation steps
   Note: In the development environment, file resources can still be taken from the local node_modules, and only when the project is online, do you need to use external resources. At this point we can use environment variables to distinguish. details as follows:

The code is as follows (example):

In the vue.config.js file:

let externals = {}
let cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
  externals = {
      /**
      * externals 对象属性解析：
      * '包名' : '在项目中引入的名字'
    */
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'xlsx': 'XLSX'
  }
  cdn = {
    css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
    ],
    js: [
      // vue must at first!
      'https://unpkg.com/vue@2.6.12/dist/vue.js', // vuejs
      'https://unpkg.com/element-ui/lib/index.js', // element-ui js
      'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js', // xlsx
    ]
  }
}
复制代码

webpack configuration externals configuration items

configureWebpack: {
  // 配置单页应用程序的页面的标题
  name: name,
  externals: externals,
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}
复制代码

Inject into index.html through html-webpack-plugin: Configure in the vue.config.js file:

chainWebpack(config) {
  config.plugin('preload').tap(() => [
    {
      rel: 'preload',
      fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
      include: 'initial'
    }
  ])
  // 注入cdn变量 (打包时会执行)
  config.plugin('html').tap(args => {
    args[0].cdn = cdn // 配置cdn给插件
    return args
  })
  // 省略其他...
}
复制代码

Find public/index.html and inject css and js in turn by configuring CDN Config. Modify the content of the head as follows:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>

      <!-- 引入样式 -->
      <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
        <link rel="stylesheet" href="<%=css%>">
        <% } %>


    <!-- 引入JS -->
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%=js%>"></script>
    <% } %>
  </head>
复制代码

Five, package and remove console.log

1. need
   After the project is packaged and launched, remove all console.log in the code
2. Code demo
   Configure in the vue.config.js file: The code is as follows (example):

chainWebpack(config) {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
}

finally
If you think this article is of little help to you, give it a thumbs up. Or you can join my development exchange group: 1025263163 to learn from each other, we will have professional technical answers to questions

If you think this article is a bit useful to you, please give us a star for our open source project: https://gitee.com/ZhongBangKeJi/CRMEB Thank very much 161938f410c32a!