在vue-cli中如何实现webpack2项目打包优化
下面我就为大家分享一篇vue-cli webpack2项目打包优化，具有很好的参考价值，希望对大家有所帮助。
减小文件搜索范围
配置 resolve.modules
Webpack的resolve.modules配置模块库（即 node_modules）所在的位置，在 js 里出现 import 'vue' 这样不是相对、也不是绝对路径的写法时，会去 node_modules 目录下找。但是默认的配置，会采用向上递归搜索的方式去寻找，但通常项目目录里只有一个node_modules，且是在项目根目录，为了减少搜索范围，可以直接写明 node_modules 的全路径；同样，对于别名(`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')
}
},
...
}合理设置 test & include & exclude
test：必须满足的条件（正则表达式，不要加引号，匹配要处理的文件）
exclude：不能满足的条件（排除不处理的目录）
include：导入的文件将由加载程序转换的路径或文件数组（把要处理的目录包括进来）
这可以减少不必要的遍历，从而减少性能损失。
替换代码压缩工具
Webpack 默认提供的 UglifyJS 插件，由于采用单线程压缩，速度慢 ；
webpack-parallel-uglify-plugin 插件可以并行运行 UglifyJS 插件，更加充分而合理的使用 CPU 资源，这可以大大减少的构建时间；
当然，该插件应用于生产环境而非开发环境，安装插件后，进行如下配置：
// 删掉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
}
}
})也试了一下同类型插件 webpack-uglify-parallel，但并没有webpack-parallel-uglify-plugin效果好（可能因项目而异，在大家项目中可以使用对比）。
webpack-parallel-uglify-plugin 插件相对 UglifyJsPlugin 打出的包略大（但是不明显）；这里的提速和增加的体积相比，我选择了追求速度（使用后我从40秒降到了19秒）。
拷贝静态文件
使用copy-webpack-plugin插件：把指定文件夹下的文件复制到指定的目录；其配置如下：
var CopyWebpackPlugin = require('copy-webpack-plugin')
plugins: [
...
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
DllPlugin & DllReferencePluginDll这个概念应该是借鉴了Windows系统的dll。一个dll包，就是一个纯纯的依赖库，它本身不能运行，是用来给你的app引用的。
打包dll的时候，Webpack会将所有包含的库做一个索引，写在一个manifest文件中，而引用dll的代码（dll user）在打包的时候，只需要读取这个manifest文件，就可以了。
一、在项目build文件夹下新增文件webpack.dll.conf.js，内容如下
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
}
})
]
}二、在webpack.prod.conf.js文件里插件部分添加：
plugins: [
...
// copy custom static assets
new webpack.DllReferencePlugin({
context: path.resolve(__dirname, '..'),
manifest: require('./vendor-manifest.json')
})
]三、在项目根目录index.html文件中添加：
<body> <p id="app"></p> <!-- built files will be auto injected --> <script src="<%= webpackConfig.output.publicPath %>spa/js/vendor.dll.js"></script> //添加这句，路径可根据所需修改 </body>
四、在package.json里打包dll添加命令
"build:dll": "webpack --config build/webpack.dll.conf.js"
五、命令顺序
npm run build:dll //打包一次之后依赖库无变动不需要执行 npm run build
优点
Dll打包以后是独立存在的，只要其包含的库没有增减、升级，hash也不会变化，因此线上的dll代码不需要随着版本发布频繁更新。
App部分代码修改后，只需要编译app部分的代码，dll部分，只要包含的库没有增减、升级，就不需要重新打包。这样也大大提高了每次编译的速度。
假设你有多个项目，使用了相同的一些依赖库，它们就可以共用一个dll。
19s->15s
设置 babel 的 cacheDirectory 为true
在webpack.base.conf.js中修改babel-loader：
loader: 'babel-loader?cacheDirectory=true',
15s->14s
设置 noParse
如果你确定一个模块中，没有其它新的依赖，就可以配置这项， Webpack 将不再扫描这个文件中的依赖，这对于比较大型类库，将能促进性能表现，具体可以参见以下配置：
module: {
noParse: /node_modules\/(element-ui\.js)/,
rules: [
{
...
}
}
happypack上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci 在vue-cli中如何实现webpack2项目打包优化. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Bagaimana untuk mengoptimumkan tetapan dan meningkatkan prestasi selepas menerima komputer Win11 baharu?
Mar 03, 2024 pm 09:01 PM
Bagaimanakah kami menyediakan dan mengoptimumkan prestasi selepas menerima komputer baharu Pengguna boleh terus membuka Privasi dan Keselamatan, dan kemudian klik Umum (ID Pengiklanan, Kandungan Tempatan, Pelancaran Aplikasi, Pengesyoran Tetapan, Alat Produktiviti atau buka terus Dasar Kumpulan Setempat Hanya gunakan editor untuk melaksanakan operasi Izinkan saya memperkenalkan kepada pengguna secara terperinci cara mengoptimumkan tetapan dan meningkatkan prestasi komputer Win11 baharu selepas menerimanya: 1. Tekan kombinasi kekunci [Win+i] untuk membuka Tetapan, kemudian klik [Privasi dan Keselamatan] di sebelah kiri, dan klik [Umum (ID Pengiklanan, Kandungan Setempat, Pelancaran Apl, Cadangan Tetapan, Produktiviti) di bawah Kebenaran Windows pada Alatan yang betul)].
Tafsiran mendalam: Mengapa Laravel lambat seperti siput?
Mar 07, 2024 am 09:54 AM
Laravel ialah rangka kerja pembangunan PHP yang popular, tetapi kadangkala ia dikritik kerana lambat seperti siput. Apakah sebenarnya yang menyebabkan kelajuan Laravel tidak memuaskan? Artikel ini akan memberikan penjelasan yang mendalam tentang sebab mengapa Laravel lambat seperti siput dari pelbagai aspek, dan menggabungkannya dengan contoh kod khusus untuk membantu pembaca memperoleh pemahaman yang lebih mendalam tentang masalah ini. 1. Isu prestasi pertanyaan ORM Dalam Laravel, ORM (Pemetaan Perhubungan Objek) ialah fungsi yang sangat berkuasa yang membolehkan
Perbincangan tentang strategi pengoptimuman gc Golang
Mar 06, 2024 pm 02:39 PM
Kutipan sampah (GC) Golang sentiasa menjadi topik hangat di kalangan pemaju. Sebagai bahasa pengaturcaraan yang pantas, pengumpul sampah terbina dalam Golang boleh mengurus memori dengan sangat baik, tetapi apabila saiz program bertambah, beberapa masalah prestasi kadangkala berlaku. Artikel ini akan meneroka strategi pengoptimuman GC Golang dan menyediakan beberapa contoh kod khusus. Pengumpulan sampah dalam pemungut sampah Golang Golang adalah berdasarkan sapuan tanda serentak (concurrentmark-s
Pengoptimuman program C++: teknik pengurangan kerumitan masa
Jun 01, 2024 am 11:19 AM
Kerumitan masa mengukur masa pelaksanaan algoritma berbanding saiz input. Petua untuk mengurangkan kerumitan masa program C++ termasuk: memilih bekas yang sesuai (seperti vektor, senarai) untuk mengoptimumkan storan dan pengurusan data. Gunakan algoritma yang cekap seperti isihan pantas untuk mengurangkan masa pengiraan. Hapuskan berbilang operasi untuk mengurangkan pengiraan berganda. Gunakan cawangan bersyarat untuk mengelakkan pengiraan yang tidak perlu. Optimumkan carian linear dengan menggunakan algoritma yang lebih pantas seperti carian binari.
Penyahkodan kesesakan prestasi Laravel: Teknik pengoptimuman didedahkan sepenuhnya!
Mar 06, 2024 pm 02:33 PM
Penyahkodan kesesakan prestasi Laravel: Teknik pengoptimuman didedahkan sepenuhnya! Laravel, sebagai rangka kerja PHP yang popular, menyediakan pembangun dengan fungsi yang kaya dan pengalaman pembangunan yang mudah. Walau bagaimanapun, apabila saiz projek meningkat dan bilangan lawatan meningkat, kami mungkin menghadapi cabaran kesesakan prestasi. Artikel ini akan menyelidiki teknik pengoptimuman prestasi Laravel untuk membantu pembangun menemui dan menyelesaikan masalah prestasi yang berpotensi. 1. Pengoptimuman pertanyaan pangkalan data menggunakan pemuatan tertunda Eloquent Apabila menggunakan Eloquent untuk menanya pangkalan data, elakkan
Penjelasan terperinci tentang fungsi VSCode: Bagaimanakah ia membantu anda meningkatkan kecekapan kerja?
Mar 25, 2024 pm 05:27 PM
Penjelasan terperinci tentang fungsi VSCode: Bagaimanakah ia membantu anda meningkatkan kecekapan kerja? Dengan pembangunan berterusan industri pembangunan perisian, usaha pemaju untuk kecekapan kerja dan kualiti kod telah menjadi matlamat penting dalam kerja mereka. Dalam proses ini, pilihan editor kod menjadi keputusan utama. Di antara banyak editor, Kod Visual Studio (pendek kata VSCode) disukai oleh majoriti pembangun kerana fungsinya yang berkuasa dan kebolehskalaan yang fleksibel. Artikel ini akan memperkenalkan beberapa fungsi VSCode secara terperinci dan membincangkan
Kesesakan prestasi Laravel didedahkan: penyelesaian pengoptimuman didedahkan!
Mar 07, 2024 pm 01:30 PM
Kesesakan prestasi Laravel didedahkan: penyelesaian pengoptimuman didedahkan! Dengan perkembangan teknologi Internet, pengoptimuman prestasi laman web dan aplikasi menjadi semakin penting. Sebagai rangka kerja PHP yang popular, Laravel mungkin menghadapi kesesakan prestasi semasa proses pembangunan. Artikel ini akan meneroka masalah prestasi yang mungkin dihadapi oleh aplikasi Laravel dan menyediakan beberapa penyelesaian pengoptimuman dan contoh kod khusus supaya pembangun dapat menyelesaikan masalah ini dengan lebih baik. 1. Pengoptimuman pertanyaan pangkalan data Pertanyaan pangkalan data ialah salah satu kesesakan prestasi biasa dalam aplikasi Web. wujud
Bagaimana untuk mengoptimumkan item permulaan sistem WIN7
Mar 26, 2024 pm 06:20 PM
1. Tekan kombinasi kekunci (kekunci win + R) pada desktop untuk membuka tetingkap jalankan, kemudian masukkan [regedit] dan tekan Enter untuk mengesahkan. 2. Selepas membuka Registry Editor, kami klik untuk mengembangkan [HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionExplorer], dan kemudian lihat jika terdapat item Serialize dalam direktori Jika tidak, kami boleh klik kanan Explorer, buat item baharu dan namakannya Serialize. 3. Kemudian klik Serialize, kemudian klik kanan ruang kosong dalam anak tetingkap kanan, cipta nilai bit DWORD (32) baharu dan namakannya Bintang
