After vue packaged app.css, verondor.js file is too large

Reference: https://blog.csdn.net/feiyu_may/article/details/80987404
         https://blog.csdn.net/qq_41999617/article/details/88052534

1. Review the various parts of file size and file size compiled

(1) webpack-bundle-analyzer tool, install dependencies

npm install cross-env --save-dev

  (2) was then added to the scripts in package.json

"analyze":"cross-env NODE_ENV=production npm_config_report=true npm run build"

as follows

"scripts": {
　　"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
　　"start": "npm run dev",
　　"build": "node build/build.js",
　　"analyze": "cross-env NODE_ENV=production npm_config_report=true npm run build"
}

(3) the implementation of npm run analyze, it will automatically open a page in a browser to display the file information. As shown below

 

 

Each piece is a compiled file and compiled the contents of the source file, the file is compiled at the top of the file, the following additional file is compiled in this document compiled source files, color block size represents the file size, so we can very intuitive to see which files are large.

2. Several file compression mode.

(1), vue-router lazily

export default new Router({
　　routes: [{
　　　　path: '/',
　　　　name: 'Home',
　　　　meta: {
　　　　　　index: 0,
　　　　　　keepAlive: true,
　　　　　　title: '首页'
　　　　},
　　　　component: resolve => require(['../components/Home'], resolve) //关键
　　},
　　{
　　path: '/mine',
　　name: 'Mine',
　　meta: {
　　　　index: 1,
　　keepAlive: false,
　　title: 'Personal center' 
　　}, 
　　Component: Resolve => the require ([ '../ Components / Mine' ], Resolve) 
}]

 

(2), packaged project file when the file does not generate a .map

After compiling npm run build, we view the file compiled and found that there are many .map files, which also accounted for a small space. The role of .map file is the compiled code to help debugging, but we have to debug the code on the line is completed, it can not generate a .map file on line.

Modify the value to false in config / productionSourceMap will of index.js

 

(3), gzip compression

Install plug

npm install --save-dev compression-webpack-plugin

Index.js find productionGzip in the config file, the property value false to true.

 

(4)、CDN

In project development, we will use a lot of third-party libraries, it can be introduced if needed, we can introduce only the components they need to reduce the space occupied, but there will be some demand can not be introduced, we can use an external CDN loaded, introduced in index.html from CDN components, remove components import other pages, modify webpack.base.config.js, joined the assembly in externals, this component is not found in order to avoid a compile-time error.

in index.html

<script src="https://cdn.bootcss.com/vue/2.6.6/vue.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/axios/0.19.0-beta.1/axios.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>

webpack.base.config.js中

entry: {
　　app: './src/main.js'
},
externals: { //关键
　　'vue': 'Vue',
　　'vue-router': 'VueRouter',
　　// 'vuex': 'Vuex',
　　'axios': 'axios',
　　'element-ui': 'ELEMENT'
},
output: {
　　path: config.build.assetsRoot,
　　filename: '[name].js',
　　publicPath: process.env.NODE_ENV === 'production' ?
　　config.build.assetsPublicPath : config.dev.assetsPublicPath
},