Vue.config.js common configuration based on Vue-CLI

admin

1.WebPack Bracket

Optimization.splitchunks in WebPack4 performs code split, put files that need to be separately extracted separately

Configuration:

chainWebpack:config => {  config.optimization.splitChunks({      chunks:  "all"      cacheGroups: {        Vendor: {            Name: "chunk-vendors",            Test: /[\\]node_modules[\\/]/,            Priority: 10,            Chunks: "initial"        },        Iview: {            Name: "chunk-iview",            Prority: 20,            Test: /[\\/]node_modules[\\/]_?iview(.*)/        },        commons:{            name:'chunk-commons',            minChunks:2,            priority:5,            chunks:'initial',            reuseExistingChunk:true        }      }  })}

2.autodllplugin cache

The DLL file is a dynamic link library, which can contain functions and data that can be called other modules in a dynamic link library.

Simply put, the dynamic link library containing a large number of multiplexed modules only needs to be compiled, and the module contained in the dynamic link library during the subsequent build process will not be recompiled, but directly using the code in the dynamic link library.

Most of the dynamic link library contains common third-party modules, such as: Vue, React, etc., as long as you do not upgrade these modules, the dynamic link library does not need to recompile

Plugins: [  New AutoDllPlugin({Inject: true, // automatically referencedFilename: '[name] .js', // file name      Entry: {                       vendor: [// needs to be packaged as a vendor package file            'vue',            'iview'          ]      }  })]

3.Terser-WebPack-Plugin Remove Console.log

Now WebPack4 defaults to use Terser-WebPack-Plugin code compression

yarnadd --dev terser-webpack-pluginconst TerserPlugin = require('terser-webpack-plugin')config.plugins.push(  new TerserPlugin({cache: true, // open the cacheparallel: true, // open multi-process execution, can be custom numbersourceMap: false, // close sourceMap    terserOptions: {          compress: {              drop_console: false,              drop_debugger: true,pure_funcs: [ 'console.log'] // removal console       }    }  }))

4.HappyPack multi-process package

Decompose the task to multiple child processes, and send the results to the main process after the child process is processed.

yarn add --dev happypackconst os = require('os')const HappyPack = require('happypack')const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })config.plugins.push(  new HappyPack({    id: 'happy-babel-js',    loaders: ['babel-loader?cacheDirectory=true'],    threadPool: happyThreadPool  }))

After WebPack4, the official recommendation uses Thread-Loader replacement

Vue-CLI4 is used in Vue-CLI4: Parallel: Require (‘OS’). CPUS (). Length> 1 is turned on, only acts on production construction

5. Add alias Alias

That is, we:

When the IMPORT DETAIL FROM “@ / Components” is quoted, the package will be parsed by the path.

chaninWebpack: config => {  config.resolve.alias    .set("@", resolve("src"))    .set("@components", resolve("src/components"))}

6.devserver local agent

yarn add --dev webapck-dev-serverdevServer: {open: true, // Build Your browser automatically opensopenPage: '' // open the specified page pathcompress: true, // turn on gzip compressionport: 8083, No. // porthost: '0.0.0.0', // ip address, LAN access,hot: false, // update the role of the thermal moduleinline: false, // close the hot updatehttps: false, // https proxy openproxy: {// plurality Agent'/ Admin': {// prefix mating interface, such as: the request is axios.post ( '/ admin / user / userInfo'),target: 'https://test.dasheng0609.com:19004', // address of the interface requests, is to "/ admin" replace target valuechangeOrigin: true, // open proxy, create a virtual server in the local        secure: false,pathRewrite: {// path rewritable'^ / Admin': '' // regular match "/ admin" prefix replaced by "" empty, if the need to modify the other, can be modified where        }     }   }}

After the local agent is configured, if: Interface request is Axios.post (‘/ admin / user / userinfo’),

In fact, test.dasheng0609.com:19004/user/userinfo

 

7. Dynamically use CDN

a. Configuring files to Externals, such as Vue, React, UI library, AXIOS, etc.

configureWebpack:config => {  config.externals = {    "vue": "Vue",    "iview": "iview",    "vue-router":"VueRouter",    "vuex": "Vuex",    "axios": "axios"  }}

b. According to the environment dynamic reference cdn, the cdn here is the CDN file you have in advance.

const cdn = require('./config/cdn') config.plugin('html').tap(args => {    if (process.env.NODE_ENV === 'production') {        args[0].cdn = cdn.build    }    if (process.env.NODE_ENV === 'development') {        args[0].cdn = cdn.dev    }     return args}

c. Create in the entrance file index.html

<% for (var i in htmlWebpackPlugin.options.cdn &&htmlWebpackPlugin.options.cdn.js) { %>  src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"><% } %>

 

Read more here: Source link