Jiangcheng Cheerful Pea: Personal homepage
Personal column :《VUE》《javaScript》
Personal website : “Jiangcheng Cheerful Pea”
The ideal of life is for an ideal life!
Table of Contents
? Column introduction
Article introduction
1. Background
2. How to optimize
Optimize loader configuration
Proper use of resolve.extensions
Optimize resolve.modules
Optimize resolve.alias
Using the DLLPlugin plug-in
Package a DLL library
Import DLL library
Use cache-loader
terser starts multithreading
Proper use of sourceMap
3. Summary
?Write at the end
? Column Introduction
Welcome to the front-end entry journey! This column is created for readers who are interested in web development and have just started learning front-end. Whether you are a beginner or a developer with some basic knowledge, we will provide you with a systematic and friendly learning platform here. We update it in the form of questions and answers to present you with selected front-end knowledge points and best practices. By explaining concepts in simple and easy-to-understand terms and providing practical examples and exercises, you can gradually build a solid foundation. Whether it is HTML, CSS, JavaScript or the latest front-end frameworks and tools, we will provide you with rich content and practical skills to help you better understand and apply various technologies in front-end development.
At the same time, we will also pay attention to the latest front-end trends and developments. As Web technology continues to evolve, front-end development is also constantly innovating. We will introduce the latest front-end frameworks, tools and technologies in a timely manner so that you can stay at the forefront and keep pace with the times. By mastering the latest front-end technologies, you will be able to become more competitive in the highly competitive field of web development.
Article introduction
1. Background
As our projects involve more and more pages, there will be more functions and business codes, and the corresponding webpack will take longer to build.
The build time is closely related to our daily development efficiency. When we start devServer or build for local development, if the time is too long, our work efficiency will be greatly reduced.
Therefore, optimizing the build speed of webpack is a very important step
2. How to optimize
Common methods to improve build speed are as follows:
-
Optimize loader configuration Proper use of resolve.extensions Optimize resolve.modules Optimize resolve.alias Using the DLLPlugin plug-in Use cache-loader terser starts multithreading Proper use of sourceMap
Optimize loader configuration
When using loader, you can configure the include, exclude, and test attributes to match files and contact include, exclude specifies which matching application loader
Taking an ES6 project as an example, when configuring babel-loader , you can do this:
module.exports = {
module: {
rules: [
{
// If there are only js files in the project source code, do not write /\.jsx?$/ to improve regular expression performance
test: /\.js$/,
// babel-loader supports caching the converted results and is enabled through the cacheDirectory option.
use: ['babel-loader?cacheDirectory'],
// Only use babel-loader for files in the src directory under the project root directory
include: path.resolve(__dirname, 'src'),
},
]
},
};
Fair use of resolve.extensions
During development, we will have various module dependencies. These modules may come from code written by ourselves or from third-party libraries. resolve can help webpack from In each require/import statement, find the appropriate module code that needs to be introduced
Through resolve.extensions, the extension name is automatically added when parsing the file. The default is as follows:
module.exports = {
...
extensions:[".warm",".mjs",".js",".json"]
}
When we import a file, if there is no file suffix, it will be searched sequentially according to the values in the array.
When we configure, don’t just write all the suffixes in it. This will call for multiple file searches, which will slow down the packaging speed.
Optimize resolve.modules
resolve.modules is used to configure which directories webpack should search for third-party modules. The default value is ['node_modules'], so files will be found from node_modules by default
When the installed third-party modules are placed in the ./node_modules directory in the project root directory, you can specify the absolute path to store the third-party modules to reduce searching. The configuration is as follows:
module.exports = {
resolve: {
// Use absolute paths to indicate where third-party modules are stored to reduce search steps.
// Among them, __dirname represents the current working directory, which is the project root directory
modules: [path.resolve(__dirname, 'node_modules')]
},
};
Optimize resolve.alias
aliasGive an alias to some commonly used paths, especially when our project directory structure is relatively deep, the path of a file may be ./../../ form
Reduce the search process by configuring alias
module.exports = {
...
resolve:{
alias:{
"@":path.resolve(__dirname,'./src')
}
}
}
Use DLLPlugin plug-in
The full name of DLL is dynamic link library, which is a way to implement a shared function library for software in winodw. Webpack also has built-in DLL functions, so that it can be shared and code that does not change frequently , extracted into a shared library. This library will be introduced into the code of other projects during the subsequent compilation process.
The usage steps are divided into two parts:
- Package a DLL library
- Import DLL library
Package a DLL library
webpack has a built-in DllPlugin that can help us package a DLL library file
module.exports = {
...
plugins:[
new webpack.DllPlugin({
name:'dll_[name]',
path:path.resolve(__dirname,"./dll/[name].mainfest.json")
})
]
}
Introduce DLL library
Use the DllReferencePlugin plug-in that comes with webpack to analyze the mainfest.json mapping file and obtain the DLL library to be used.
Then introduce our packaged DLL library into the Html module through the AddAssetHtmlPlugin plug-in.
module.exports = {
...
new webpack.DllReferencePlugin({
context:path.resolve(__dirname,"./dll/dll_react.js"),
mainfest:path.resolve(__dirname,"./dll/react.mainfest.json")
}),
new AddAssetHtmlPlugin({
outputPath:"./auto",
filepath:path.resolve(__dirname,"./dll/dll_react.js")
})
}
Use cache-loader
Add cache-loader before some loader with large performance overhead to cache the results to disk, significantly improving the speed of secondary builds.
There will be some time overhead in saving and reading these cache files, so please only use this loader for loader that has a large performance overhead.
module.exports = {
module: {
rules: [
{
test: /\.ext$/,
use: ['cache-loader', ...loaders],
include: path.resolve('src'),
},
],
},
};
terser starts multi-threading
Use multiple processes to run in parallel to increase build speed
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
parallel: true,
}),
],
},
};
Fair use sourceMap
When packaging and generating sourceMap, the more detailed the information, the slower the packaging speed will be. The corresponding attribute values are as follows:
3. Summary
As you can see, there are many ways to optimize the construction of webpack. You can mainly start with optimizing search time, narrowing the file search scope, and reducing unnecessary compilation.
? Write at the end
Please feel free to give me some advice, comment below or send me a private message. Thank you very much.
? I think a certain part of my design is too cumbersome. Is there a simpler or higher-quality packaging method?
? Think some of my code is too old and can provide new API or the latest syntax?
? Don’t understand some of the content in the article
?Answer some questions in my article
? Think that some interactions and functions need to be optimized, and find bugs
? Want to add new features and have better suggestions for the overall design and appearance?
Finally, thank you for your patience in watching. Now that we are here, click Like and go!
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Vue entry-level skills treewebpack packaging toolFront-end modularization 39628 people are learning the system