How to implement webpack2 project packaging optimization in vue-cli
Now I will share with you an article about vue-cli webpack2 project packaging optimization, which has a good reference value and I hope it will be helpful to everyone.
Reduce the file search scope
Configure resolve.modules
Webpack’s resolve.modules Configure the location of the module library (i.e. node_modules). When import 'vue' appears in js which is not a relative or absolute path, it will be found in the node_modules directory. However, the default configuration will be found through upward recursive search, but usually there is only one node_modules in the project directory, and it is in the project root directory. In order to reduce the search scope, you can directly specify the full path of node_modules; similarly, for aliases ( The same applies to the configuration of `alias):
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
resolve: {
extensions: ['.js', '.vue', '.json'],
modules: [
resolve('src'),
resolve('node_modules')
],
alias: {
'vue$': 'vue/dist/vue.common.js',
'src': resolve('src'),
'assets': resolve('src/assets'),
'components': resolve('src/components'),
// ...
'store': resolve('src/store')
}
},
...
}Reasonably set test & include & exclude
test: Conditions that must be met (regular expression, do not add quotes , match the files to be processed)
exclude: conditions that cannot be met (exclude directories that are not processed)
include: the path or file array that the imported file will be converted by the loader (to be processed directory included)
This can reduce unnecessary traversal, thereby reducing performance loss.
Replace the code compression tool
The UglifyJS plug-in provided by Webpack by default is slow due to the use of single-thread compression;
webpack-parallel-uglify- The plugin plugin can run the UglifyJS plugin in parallel, making more full and reasonable use of CPU resources, which can greatly reduce the build time;
Of course, this plugin should be used in the production environment rather than the development environment. After installing the plugin, proceed as follows Configuration:
// 删掉webpack提供的UglifyJS插件
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false,
// drop_console: true
// },
// sourceMap: true
// }),
// 增加 webpack-parallel-uglify-plugin来替换
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
new ParallelUglifyPlugin({
cacheDir: '.cache/', // 设置缓存路径，不改动的调用缓存，第二次及后面build时提速
uglifyJS:{
output: {
comments: false
},
compress: {
warnings: false
}
}
})I also tried the same type of plug-in webpack-uglify-parallel, but it was not as effective as webpack-parallel-uglify-plugin (it may vary from project to project, you can use it in your project for comparison).
webpack-parallel-uglify-plugin The package produced by the plug-in is slightly larger than that of UglifyJsPlugin (but not obvious); compared with the increased size, I chose to pursue speed (after using it, it dropped from 40 seconds to 40 seconds). to 19 seconds).
Copy static files
Use the copy-webpack-plugin plug-in: copy the files in the specified folder to the specified directory; its configuration is as follows:
var CopyWebpackPlugin = require('copy-webpack-plugin')
plugins: [
...
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
DllPlugin & DllReferencePluginThe concept of Dll should be borrowed from the dll of Windows system. A dll package is a purely dependent library. It cannot run on its own and is used to reference it in your app.
When packaging a dll, Webpack will make an index of all included libraries and write them in a manifest file, and the code that references the dll (dll user) only needs to read this manifest file when packaging. , that’s it.
1. Add the file webpack.dll.conf.js under the project build folder with the following content
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: {
vendor: [ // 这里填写需要的依赖库
'babel-polyfill',
'axios',
'vue/dist/vue.common.js',
'vue-router',
'pingpp-js',
"region-picker"
]
},
output: {
path: path.resolve(__dirname, '../static/js'),
filename: '[name].dll.js',
library: '[name]_library'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
plugins: [
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
libraryTarget: 'commonjs2',
name: '[name]_library'
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}2. Add the plugin part in the webpack.prod.conf.js file:
plugins: [
...
// copy custom static assets
new webpack.DllReferencePlugin({
context: path.resolve(__dirname, '..'),
manifest: require('./vendor-manifest.json')
})
]3. Add the following in the index.html file in the project root directory:
<body> <p id="app"></p> <!-- built files will be auto injected --> <script src="<%= webpackConfig.output.publicPath %>spa/js/vendor.dll.js"></script> //添加这句，路径可根据所需修改 </body>
4. Add the command to package the dll in package.json
"build:dll": "webpack --config build/webpack.dll.conf.js"
5 , Command sequence
npm run build:dll //打包一次之后依赖库无变动不需要执行 npm run build
Advantages
Dll exists independently after being packaged, as long as the library it contains does not increase The hash will not change even if it is reduced or upgraded, so the online dll code does not need to be updated frequently with version releases.
After the App part code is modified, you only need to compile the app part code and the dll part. As long as the included libraries are not increased, decreased, or upgraded, there is no need to repackage. This also greatly improves the speed of each compilation.
Suppose you have multiple projects that use the same dependent libraries, they can share a dll.
19s->15s
Set babel's cacheDirectory to true
Modify babel-loader in webpack.base.conf.js:
loader: 'babel-loader?cacheDirectory=true',
15s->14s
Set noParse
If you are sure that there are no other new dependencies in a module, you can configure this, Webpack will no longer scan the dependencies in this file. This will improve performance for relatively large class libraries. For details, please see the following configuration:
module: {
noParse: /node_modules\/(element-ui\.js)/,
rules: [
{
...
}
}
happypackThe above is what I compiled for everyone. I hope it will be helpful to everyone in the future. helpful.
Related articles:
User permission control in Vue2.0
Detailed explanation of how to implement vuex (detailed tutorial)
The above is the detailed content of How to implement webpack2 project packaging optimization in vue-cli. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to optimize settings and improve performance after receiving a new Win11 computer?
Mar 03, 2024 pm 09:01 PM
How do we set up and optimize performance after receiving a new computer? Users can directly open Privacy and Security, and then click General (Advertising ID, Local Content, Application Launch, Setting Recommendations, Productivity Tools or directly open Local Group Policy Just use the editor to operate it. Let me introduce to you in detail how to optimize settings and improve performance after receiving a new Win11 computer. How to optimize settings and improve performance after receiving a new Win11 computer. One: 1. Press the [Win+i] key combination to open Settings, then click [Privacy and Security] on the left, and click [General (Advertising ID, Local Content, App Launch, Setting Suggestions, Productivity) under Windows Permissions on the right Tools)】.Method 2
In-depth interpretation: Why is Laravel as slow as a snail?
Mar 07, 2024 am 09:54 AM
Laravel is a popular PHP development framework, but it is sometimes criticized for being as slow as a snail. What exactly causes Laravel's unsatisfactory speed? This article will provide an in-depth explanation of the reasons why Laravel is as slow as a snail from multiple aspects, and combine it with specific code examples to help readers gain a deeper understanding of this problem. 1. ORM query performance issues In Laravel, ORM (Object Relational Mapping) is a very powerful feature that allows
Decoding Laravel performance bottlenecks: Optimization techniques fully revealed!
Mar 06, 2024 pm 02:33 PM
Decoding Laravel performance bottlenecks: Optimization techniques fully revealed! Laravel, as a popular PHP framework, provides developers with rich functions and a convenient development experience. However, as the size of the project increases and the number of visits increases, we may face the challenge of performance bottlenecks. This article will delve into Laravel performance optimization techniques to help developers discover and solve potential performance problems. 1. Database query optimization using Eloquent delayed loading When using Eloquent to query the database, avoid
C++ program optimization: time complexity reduction techniques
Jun 01, 2024 am 11:19 AM
Time complexity measures the execution time of an algorithm relative to the size of the input. Tips for reducing the time complexity of C++ programs include: choosing appropriate containers (such as vector, list) to optimize data storage and management. Utilize efficient algorithms such as quick sort to reduce computation time. Eliminate multiple operations to reduce double counting. Use conditional branches to avoid unnecessary calculations. Optimize linear search by using faster algorithms such as binary search.
Discussion on Golang's gc optimization strategy
Mar 06, 2024 pm 02:39 PM
Golang's garbage collection (GC) has always been a hot topic among developers. As a fast programming language, Golang's built-in garbage collector can manage memory very well, but as the size of the program increases, some performance problems sometimes occur. This article will explore Golang’s GC optimization strategies and provide some specific code examples. Garbage collection in Golang Golang's garbage collector is based on concurrent mark-sweep (concurrentmark-s
Detailed explanation of VSCode functions: How does it help you improve work efficiency?
Mar 25, 2024 pm 05:27 PM
Detailed explanation of VSCode functions: How does it help you improve work efficiency? With the continuous development of the software development industry, developers' pursuit of work efficiency and code quality have become important goals in their work. In this process, the choice of code editor becomes a key decision. Among many editors, Visual Studio Code (VSCode for short) is loved by the majority of developers for its powerful functions and flexible scalability. This article will introduce some functions of VSCode in detail and discuss
Laravel performance bottleneck revealed: optimization solution revealed!
Mar 07, 2024 pm 01:30 PM
Laravel performance bottleneck revealed: optimization solution revealed! With the development of Internet technology, the performance optimization of websites and applications has become increasingly important. As a popular PHP framework, Laravel may face performance bottlenecks during the development process. This article will explore the performance problems that Laravel applications may encounter, and provide some optimization solutions and specific code examples so that developers can better solve these problems. 1. Database query optimization Database query is one of the common performance bottlenecks in Web applications. exist
How to optimize the startup items of WIN7 system
Mar 26, 2024 pm 06:20 PM
1. Press the key combination (win key + R) on the desktop to open the run window, then enter [regedit] and press Enter to confirm. 2. After opening the Registry Editor, we click to expand [HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionExplorer], and then see if there is a Serialize item in the directory. If not, we can right-click Explorer, create a new item, and name it Serialize. 3. Then click Serialize, then right-click the blank space in the right pane, create a new DWORD (32) bit value, and name it Star
