The original link: small handsome の technology blog https://ssscode.com/pages/e6f55f/
This section uses the VUE project as an example. The configuration includes but is not limited to the VUE project. Other items are basically the same according to similar logic configuration.
The CDN to accelerate
-
Analysis: The third-party dependency libraries such as Echart, Element-UI, and Lodash are extracted separately to reduce the size of the package. The dependency plug-ins with the key attribute externals configured will not be packed into chunk. CDN acceleration and caching can also speed up access.
-
Action: Here we configure externals in chainWebpack.
-
Note: For how to determine the key and value of externals, please refer to the CDN configuration in the Vue project
-
Free CDN: UNPKG, JsDeliVR, other services to consider.
Methods a
Manually introduce CDN links in index.html.
Vue. Config.js configuration file:
const IS_PRO = process.env.NODE_ENV === 'production';
module.exports={
/ /... Other Basic Configurations
chainWebpack: (config) = > {
if (IS_PRO) {
config.externals({
echarts: 'echarts'
});
}
}
}
Copy the codePublic/index. The HTML file:
<div id="app"></div>
<! <div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
Copy the codeWay 2
Inject the CDN into index.html using the HTmL-webpack-plugin
-
The html-webpack-plugin creates an HTML file when using Webpack packaging, and inserts the static webpack-packed file into the HTML file automatically. By default, html-webpack-plugin will create an index. HTML file in the output.path directory and insert a script tag into this file with a SRC of output.filename.
-
For details on how to use the html-webpack-plugin, see the html-webpack-plugin summary in this article
The html-webpack-plugin configuration in vue.config.js
const cdn={
css: [].
js: ['https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js']
}
// Inject the CDN into index.html via html-webpack-plugin
config.plugin('html').tap(args= >{
args[0].cdn=cdn
return args
})
Copy the codeGzip configuration
Document address: CompressionWebpackPlugin
Vue.config. js is configured via the html-webpack-plugin
const IS_PRO = process.env.NODE_ENV === 'production';
const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js'.'css'];
module.exports={
/ /... Other Basic Configurations
configureWebpack: (config) = > {
if (IS_PRO) {
/ / gzip compression
config.plugins.push(
new CompressionPlugin({
The default values of asset and algorithm are [path]. Gz [query] and gzip
// asset: '[path].gz[query]',
// algorithm: 'gzip',
// filename:'',
test: new RegExp('\ \. (' + productionGzipExtensions.join('|') + '$'),
threshold: 10240.
minRatio: 0.8
})
);
}
}
}
Copy the codeHowever, using precompressed files with the.gz extension also requires the configuration of a Web server (such as Nginx). See nginx configuring gzip_static
Nginx supports static compression and dynamic compression. Static compression can be used for existing.gz files in the project, and dynamic compression can be used for no compiled.gz files in the project. Ngx_http_gzip_static_module is required.
A combination of nginx dynamic compression and static compression is recommended:
Enable and disable gzip mode gzip on; Gzip_min_length 1k; # change the buffers of gzip_buffers 4 16k; # change the buffers of gzip_buffers 4 16k; Gzip_http_version 1.0; # gzip_comp_level 2; # gzip_comp_level 2; Gzip_types text/plain Application /javascript text/ CSS application/ XML; Gzip_vary on is recommended for HTTP header Vary: accept-encoding.Copy the codeSplitChunks unpacking optimization
-
Analysis: WebPack by default packages all dependencies and add-ons into Vendors. Js, some of which may be app.js. So, for projects that introduce a lot of third party dependencies, this file can be quite large. Plug-ins that are only used in a particular page can also waste performance. This is where splitting and asynchrony become important.
-
Webpack – bundle – analyzer: The size of the package can be seen when the local packaging is complete. For a more detailed analysis, you can use the webpack-bundle-Analyzer plugin. See this article for a quick start with webpack-bundle-Analyzer
-
SplitChunksPlugin: See the webpack SplitChunksPlugin Practical Guide for parameters and details
Vue. Config.js configuration file:
const IS_PRO = process.env.NODE_ENV === 'production';
module.exports={
chainWebpack: (config) = > {
config.when(IS_PRO, (config) => { // When can also be changed to if
/ / unpacking
config.optimization.splitChunks({
chunks: 'all'.
cacheGroups: {
// This will inherit the configuration and default configuration of splitChunks, such as the above: "all"
// The following configuration has a higher priority and overwrites the previous configuration, such as chunks: "initial"
// Because webpack4 has zero configuration, there will be a lot of default configuration, so for details and actual unknown project compilation results, it is important to determine and understand the specific logic of the default value, to troubleshoot the problem. (I've stepped in a lot of holes before.)
libs: {
name: 'chunk-libs'.// The package name will be compiled with the hash value to generate the final chunk-libs.8880c0aa.js.
test: /[\\/]node_modules[\\/]/.// Regress to filter dependent packages
priority: 10.// Set the package priority
chunks: 'initial' //all, async, initial
}
vantUI: {
name: 'chunk-vantUI'.
priority: 20.
test: /[\\/]node_modules[\\/]_? vant(.*)/
},
echarts: {
name: 'chunk-echarts'.
priority: 20.
test: /[\\/]node_modules[\\/]_? echarts(.*)/
},
commons: {
name: 'chunk-commons'.
test: resolve('src/components'),
minChunks: 3.
priority: 5.
reuseExistingChunk: true
}
}
});
});
}
}
Copy the codeIf you look at the final result, it’s pretty good. The compressed gzip is pretty small.
More gameplay to explore, but also welcome to communicate :fire:
