Webpack configuration packaging optimization

Create a new directory in the root directoryvue.config.jsTo set the static resource path to. '/'Otherwise, the project will not run after packaging

module.exports = {
    publicPath: "./"
}

2. Close the production environmentSourceMapMap files, reducing package size by 80%

module.exports = {
    productionSourceMap: false,
}

3. Perform cross-domain configuration

Module. exports = {devServer: {open: false, // automatically start browser host: '0.0.0.0', // localhost port: 6060, // port number hotOnly: False, / / hot update overlay: {/ / when a compiler error or warning, in the browser display full screen cover warnings: false, errors: true}, proxy: {/ / configuration cross-domain '/ API: {target: 'https://www.test.com', // interface domain name // ws: true, // whether webSockets changOrigin is enabled: PathRewrite: {'^/ API ': '/'}}}}}

Four, configuration,aliasThe alias

// Load the path module const path = require('path') // define the resolve method, Const resolve = dir => path.join(__dirName, dir) module.exports = {chainWebpack: Config => {// add the alias config.resolve.alias.set ('@', resolve(' SRC ')).set('assets', resolve(' SRC /assets')).set(' API ', resolve('src/api')) .set('views', resolve('src/views')) .set('components', resolve('src/components')) } }

After the configuration is complete, we can write the path in the project like this:

// Import Home from '.. /views/ home.vue 'import Home from 'views/ home.vue' import Home from '@/views/ home.vue '

Five, use CDN to accelerate optimization

CDN optimization refers to third-party libraries such as
(Vue, Vue - Router, axios)Introduce the project through CDN, so
Vendor.js (a collection of third-party dependent libraries)Will significantly reduce, and greatly improve the project’s home page loading speed, the following is the specific operation:

const isProduction = process.env.NODE_ENV === 'production'; // externals const externals = { vue: 'Vue', 'vue-router': 'VueRouter', vuex: 'Vuex', vant: 'vant', axios: Const CDN = {dev: {CSS: [], js: []}, // build: {CSS: [' https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css '], js: [' https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js', 'https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js'].}} the module exports = {configureWebpack: Config => {// Modify the configuration for the production environment... if (isProduction) { // externals config.externals = externals } }, chainWebpack: Config => {/** * add CDN parameter to htmlWebpackPlugin configuration */ config.plugin(' HTML ').tap(args => {if (isProduction) {args[0].cdn = cdn.build } else { args[0].cdn = cdn.dev } return args }) } }

Six, removeconsole.logPrint and comment

Installation:
npm install uglifyjs-webpack-plugin --save-dev


congsole.log()And comments don’t take up much volume, depending on the comments in the project, and
console.log()The number.

const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const isProduction = process.env.NODE_ENV === 'production'; configureWebpack: config => { const plugins = []; If (isProduction) {plugins.push(new UglifyJsPlugin({uglifyOptions: {output: {comments: false, // delete comments}, warnings: False, compress: {drop_console: true, drop_debugger: false, pure_funcs: ['console.log']// remove console}}))}},

Seven, finally inpubilcStatic resources folderindex.htmlThe CDN external resource links are introduced in the

<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" /> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" /> <% } %> <! -- Using CDN accelerated JS files, Under configuration in vue. Config. Js - > < % for (I in htmlWebpackPlugin var. The options. The CDN && htmlWebpackPlugin. Options. The CDN. Js) {% > < script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script> <% } %>