1. Import various component libraries as required

.babel.config.js

module.exports = { presets: [["@vue/app", { useBuiltIns: "entry" }]], plugins: [" Component ", {libraryName: "element-ui", styleLibraryName: "theme-chalk"}]]}Copy the code

1. V-if and V-show select less use of v-if binding key

Vuejs component segmentation, such as a component, can be subdivided into a multicast component, a list component, a paging component, etc. 3. Reduce the data of Watch. When the data is large, the system will lag, so reduce the data of Watch.

4. The partitioned route is loaded lazily. Components are loaded only when the route is accessed

  const router = new VueRouter({
   routes: [
     { path: '/foo', component:  () => import('./Foo.vue')}
   ]
 })
Copy the code

5. The image resources of the content class system are loaded on demand. Many images are loaded, and v-lazy is used

``` npm install vue-lazyload --save-dev import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload) <img V -lazy="/static/img/1.png"> remove event listeners, timers, closures, etcCopy the code

6.SSR(server rendering) If the project is relatively large, no matter how to optimize the first screen, there will be a flash screen or a black screen. Consider using SSR(server-side rendering)

7. Vue functional optimization

8. Object. Freeze optimization

9. Reduce HTTP requests

10. Reduce caching and DOM operations

2. Optimization of Webpack packaging

View the percentage of imported packages

Add "report": "vue-cli-service build --report" to the scripts of package.json. Run NPM run report to find the reportCopy the code

1. Enable gzip compression

// Download NPM install compression-webpack-plugin --save-devCopy the code
const isProduction = ["production", "prod"].includes(process.env.NODE_ENV); const CompressionWebpackPlugin = require('compression-webpack-plugin'); const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\? . *)? $/i; configureWebpack: config => { const plugins = []; if (isProduction) { plugins.push( new CompressionWebpackPlugin({ filename: "[path].gz[query]", algorithm: "gzip", test: ProductionGzipExtensions, threshold: 10240, minRatio: 0.8})); } config.plugins = [...config.plugins, ...plugins]; }Copy the code

2. Package splitChunks separately with third-party modules

/ / webpack chainWebpack: configuration (config) = > {if (isProduction) {config. Optimization. The delete (" splitChunks "); } return config; },Copy the code
ConfigureWebpack: config => {if (isProduction) {config.optimization = {splitChunks: { cacheGroups: { common: { name: "chunk-common", chunks: "initial", minChunks: 2, maxInitialRequests: 5, minSize: 0, priority: 1, reuseExistingChunk: true, enforce: true }, vendors: { name: "chunk-vendors", test: /[\\/]node_modules[\\/]/, chunks: "initial", priority: 2, reuseExistingChunk: true, enforce: true }, elementUI: { name: "chunk-elementui", test: /[\\/]node_modules[\\/]element-ui[\\/]/, chunks: "all", priority: 3, reuseExistingChunk: true, enforce: true }, echarts: { name: "chunk-echarts", test: /[\\/]node_modules[\\/](vue-)? echarts[\\/]/, chunks: "all", priority: 4, reuseExistingChunk: true, enforce: true } } } }; } config.plugins = [...config.plugins, ...plugins]; }Copy the code

3. Remove consollog

configureWebpack: config => { const plugins = []; If (isProduction) {// Consollog plugins.push(new UglifyJsPlugin({uglifyOptions: {compress: {warnings: Drop_console: true, drop_debugger: false, pure_funcs: ["console.log"] // Remove console},}, sourceMap: false, parallel: true, }) ); } config.plugins = [...config.plugins, ...plugins]; }Copy the code

4. Compress the image

   config.module
    .rule('images')
    .use('image-webpack-loader')
    .loader('image-webpack-loader')
    .options({
      bypassOnDebug: true
    })
  .end()
Copy the code

After setting this parameter, the file ending in.gz can be seen after packaging. AcceptEncoding:gzip can be seen in the Request Headers of HTTP requests. To make the server return a. Gz file, you also need to configure the server to authenticate it according to the Accept-Encoding tag of Request Headers, or return a. Gz file if gzip is supported.

Complete the vue. Config. Js

const path = require("path"); const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); const CompressionWebpackPlugin = require("compression-webpack-plugin"); const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\? . *)? $/i; const isProduction = ["production", "prod", 'test'].includes(process.env.NODE_ENV); const resolve = dir => path.join(__dirname, dir); Module.exports = {publicPath: "/", // publicPath runtimeCompiler: true, // whether to use the Vue build with the runtimeCompiler outputDir: Process.env.outputdir, // pluginOptions: {"style-resources-loader": {preProcessor: "less", patterns: / / / this is combined with their own path, / / note: try not use alias path path. Resolve (__dirname, ". / SRC/assets/CSS/variable. Less ")]}}, lintOnSave: Eslint productionSourceMap: false, // Disable esLint productionSourceMap: false, // CSS separates files in production environment // CSS related configuration devServer: {// Configure the server port: 8112, open: true, https: false, // disableHostCheck: true, // overlay: { // warnings: false, // errors: true // }, proxy: {"/ API /*": {target: process.env.vue_app_URL, // target API address ws: true, // whether webSockets changOrigin: True, / / cross-domain configuration pathRewrite: {" ^ / API ":"/"}}, / / "/ common / *" : {/ / target: Process.env.vue_app_mipa_url, // destination API address // ws: true, // whether to proxy websockets // changOrigin: True, / / / / pathRewrite cross-domain configuration: {/ / "^ / common" : "/" / /} / /}}}, compatible / / build/configuration/webpack chainWebpack: Config => {// Remove prefetch plugin config.plugins.delete('prefetch') // Remove preload plugin config.plugins.delete('preload'); // config.entry("main").add("babel-polyfill"); / / alias config. Resolve. Alias. Set (" @ ", resolve (" SRC "). The set (" @ "I resolve (" SRC/assets/image")); if (isProduction) { config.optimization.delete("splitChunks"); // config.module //.rule('images') //.use('image-webpack-loader') //.loader('image-webpack-loader') // .options({ // bypassOnDebug: true // }) // .end() return config; }, // configureWebpack configureWebpack: config => {const plugins = []; Push (new CompressionWebpackPlugin({filename: "[path].gz[query]", algorithm: "Gzip" test: productionGzipExtensions, threshold: 10240, minRatio: 0.8, deleteOriginalAssets: false / / delete the original file})); Config. optimization = {splitChunks: {cacheGroups: {common: {name: "chunk-common", chunks: "all", minChunks: 2, maxInitialRequests: 5, minSize: 0, priority: 1, reuseExistingChunk: true, enforce: true }, vendors: { name: "chunk-vendors", test: /[\\/]node_modules[\\/]/, chunks: "all", priority: 2, reuseExistingChunk: true, enforce: true }, styles: { name: 'chunk-styles', test: /\.(sa|sc|le|c)ss$/, chunks: 'all', enforce: true, }, elementUI: { name: "chunk-element-ui", test: /[\\/]node_modules[\\/]element-ui[\\/]/, chunks: "all", priority: 3, reuseExistingChunk: true, enforce: true }, echarts: { name: "chunk-echarts", test: /[\\/]node_modules[\\/]echarts[\\/]/, chunks: "all", priority: 4, reuseExistingChunk: true, enforce: true }, vue: { name: "chunk-vue", test: /[\\/]node_modules[\\/]vue[\\/]/, chunks: "all", priority: 5, reuseExistingChunk: true, enforce: true }, xlsx: { name: "chunk-xlsx", test: /[\\/]node_modules[\\/]xlsx[\\/]/, chunks: 'all', priority: 6, reuseExistingChunk: true, enforce: true }, runtimeChunk: { name: 'manifest' } } } }; // Consollog plugins.push(new UglifyJsPlugin({uglifyOptions: {// delete comments output: {comments: false}, compress: {// warnings: false, drop_console: true, drop_debugger: false, pure_funcs: ["console.log"] // Remove console}}, sourceMap: {// warnings: false, drop_console: true, drop_debugger: false, pure_funcs: ["console.log"] false, parallel: true }) ); } config.plugins = [...config.plugins, ...plugins]; }};Copy the code