Package is too big, it is estimated that the introduction of a package is too big, guess or pinyin, or voice input, looking for a circle, finally found that echart is too big
2. Introduction of EChart’s CDN, referring to the blogVue-cli4 Project Configures the CDN to import static resources
My page reported an error after modification according to the configuration
Can not deal with, or see the official Internet cafeVue – cli’s official website
configureWebpack
If the value is an object, it is merged into the final configuration using webpack-Merge.
If the value is a function, the parsed configuration is accepted as an argument. This function can either modify the configuration and return nothing, or it can return a cloned or merged version of the configuration.
1. I’m using object configuration here. The official documentation means that if you want to determine whether it is production or development, you should use function mode, and use object mode without distinction
Externals prevents package import dependencies from being added to the bundle, and instead gets these dependencies from the runtime. For example, import jQuery from the CDN instead of packaging it
Build the application in multi-Page mode. Each “page” should have a corresponding JavaScript entry file. The value should be an object whose key is the name of the entry and whose value is:
An object specifying entry, template, filename, title, and chunks (all optional except entry); Or a string specifying its entry.
After the package is packaged, a site with port 8919 will automatically appear. The site content is as follows:
ChainWebpack is a function that takes an instance of a ChainableConfig based on webpack-chain. Allows for more fine-grained changes to the internal WebPack configuration.
7, configuration optimization, unpacking
Module. exports = {configureWebpack:{// optimization // optimization: {// Tell WebPack to compress bundles using TerserPlugin or other plugins defined in Optimization.minimizer. minimize:true, // For dynamically imported modules, the new generic chunking policy splitChunks provided by WebPack V4 + is used by default: {chunks:'async'// minRemainingSize: 0, minChunks: 1, maxAsyncRequests: 6, maxInitialRequests: 4, automaticNameDelimiter:'~',
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
}
}
Copy the code
Add that and it’s a little bit smaller, so it’s 10.3
8. That leaves large SVG and vconsole, which should not be used in production
The Vsonsole forgot to comment it out, so it won’t be packaged in, or you can configure the Vconsole to only be displayed in production
// import Vconsole from "vconsole"
// const vConsole = new Vconsole()
// Vue.use(vConsole)
Copy the code
SVG is easy to solve, just delete the unwanted ones
As a result, from 18.7m at the beginning to 3.36m at the end, the package size has been optimized quite a lot, and the loading time has also increased from 8s to about 1s now
Finally, paste vue.config.js,
const CompressionPlugin = require('compression-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer'Const autoprefixer = require().BundleAnalyzerPlugin // automatically add browser prefixes to improve compatibility'autoprefixer')
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
const IS_PROD = process.env.NODE_ENV === 'production'
const cdnDomain = '/'
module.exports = {
publicPath: IS_PROD ? cdnDomain : '/',
productionSourceMap: false// Map file lintOnSave:false, // Sets whether esLint validation is enabled every time code is saved in the development environment. devServer: { hot:true// Set the port to 9527, HTTPS:false,
hotOnly: false,
overlay: {
warnings: true,
errors: true}, // Configure multiple proxies proxy: {[process.env.vue_app_base_API]: {target: process.env.base_url, changeOrigin:true,
pathRewrite: {
[A '^' + process.env.VUE_APP_BASE_API]: ' '
}
}
}
},
chainWebpack: config => {
const svgRule = config.module.rule('svg'// Find svG-loader svgRule.uses.clear() // Clear the existing loader, If not, add svgRule. Exclude. add(/node_modules/) // regular match after this loader to exclude node_modules directory svgRule // add SVG new loader processing .test(/\.svg$/) .use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'}) const imagesRule = config.module.rule()'images')
imagesRule.exclude.add(path.resolve('src/assets/icons'Config.module. rule(config.module.'images') .test(/\.(png|jpe? g|gif|svg)(\? . *)? $/) .use('img-loader')
.loader('img-loader').options({
plugins: [
require('imagemin-jpegtran')(),
require('imagemin-pngquant'({quality: [0.75, 0.85]})]}) // Enable GZip compression config.plugin ('compression')
.use(CompressionPlugin, {
asset: '[path].gz[query]',
algorithm: 'gzip'.test: new RegExp('\ \. (' + ['js'.'css'].join('|') + '$'),
threshold: 10240,
minRatio: 0.8,
cache: true}).tap(args => {})}, CSS: {loaderOptions: {postcss: {plugins: [autoprefixer(),'postcss-px-to-viewport')({
unitToConvert: 'px', viewportWidth: 375, // The width of the window corresponds to the width of our design draft, usually 750 viewportHeight: UnitPrecision: 3; // Specify the decimal number of Windows converted to the px unit value. ViewportUnit:'vw'Vw selectorBlackList: [] is recommended. // Specify a class that is not to be converted to a window unit. It can be customized and can be added without limit. 1, // less than or equal to '1px' does not convert to window units, you can also set to the value you want mediaQuery:false// Allow conversion 'px'})]}, less: {modifyVars: {black:'# 313131',
red: '#F44',
blue: '# 666666',
orange: '#F89516',
green: '#268AED'.'text-color': '# 313131'.'background-color': '#F5F5F5'// Button reset'button-default-height': '38px'.'button-default-line-height': '36px'.'button-default-font-size': '14px'.'button-default-color': '#34394A'.'button-default-border-color': '#DDD'.'button-large-height': '47px'.'button-large-line-height': '45px'.'button-border-radius': '4px'.'button-small-font-size': '14px'.'button-small-min-width': '64px'// nav resets'nav-bar-arrow-size': '18px'.'nav-bar-title-font-size': '17px'}}}}, // configureWebpack configureWebpack: {// devtool:'eval',
devtool: 'source-map', resolve: {// Configure the project aliasalias: {
'assets': path.resolve('./src/assets'),
'api': path.resolve('./src/api'),
'components': path.resolve('./src/components'),
'utils': path.resolve('./src/utils'),
'views': path.resolve('./src/views'),
'styles': path.resolve('./src/styles'),
The '@': resolve('src')
}
},
externals: {
vue: 'Vue',
// axios: 'axios'// Can not use CDN, otherwise the configuration can not be used'vant': 'VANT'.'echarts': 'echarts'.'vue-router': 'VueRouter',
vuex: 'Vuex',
// swiper: 'swiper'// CDN loading is too slow //"vue-ls": "vue-ls"// CDN loading is too slow'lottie-web': 'lottie-web'.'element-ui': 'ELEMENT'}, plugins: [// New BundleAnalyzerPlugin({analyzerPort: 8919})], // Optimization: {// Tell WebPack to compress bundles using TerserPlugin or other plugins defined in Optimization.minimizer. minimize:true, // For dynamically imported modules, the new generic chunking policy splitChunks provided by WebPack V4 + is used by default: {chunks:'async'// minRemainingSize: 0, minChunks: 1, maxAsyncRequests: 6, maxInitialRequests: 4, automaticNameDelimiter:'~',
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
},
pages: {
index: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html',
chunks: ['chunk-vendors'.'chunk-common'.'index'], // Configure dynamically generated tags in index.html CDN: {CSS: ['https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css'
],
js: [
"https://cdn.staticfile.org/vue/2.5.22/vue.min.js"."https://cdn.staticfile.org/vue-router/3.0.2/vue-router.min.js", / /"https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.min.js"// Can not use CDN, otherwise the configuration can not be used'https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js'."https://cdn.staticfile.org/vuex/3.1.1/vuex.min.js"."https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"."https://cdn.bootcss.com/echarts/4.8.0/echarts.simple.min.js"."https://cdn.staticfile.org/lottie-web/5.7.1/lottie.min.js", / /"https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"// CDN loading is too slow //"https://cdn.bootcdn.net/ajax/libs/vue-ls/3.2.1/vue-ls.js",// CDN loading too slow]},}}}Copy the code
This paper is mainly to record their own optimization process, configuration is not perfect, many places to write too messy, organized is not good, have time to slowly change…
