webpack性能优化
Webpack性能优化的方式有很多种，本文之所以将 dll 单独讲解，是因为 dll 是一种最简单粗暴并且极其有效的优化方式。本文主要介绍了详解webpack性能优化——DLL，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
在通常的打包过程中，你所引用的诸如：jquery、bootstrap、react、react-router、redux、antd、vue、vue-router、vuex 等等众多库也会被打包进 bundle 文件中。由于这些库的内容基本不会发生改变，每次打包加入它们无疑是一种巨大的性能浪费。
Dll 的技术就是在第一次时将所有引入的库打包成一个 dll.js 的文件，将自己编写的内容打包为 bundle.js 文件，这样之后的打包只用处理 bundle 部分。
以一个 Vue 项目为例，首先创建一个名为 webpack.dll.config.js 的文件
var path = require("path"),
fs = require('fs'),
webpack = require("webpack");
var vendors = [
'vue',
'vue-router',
'vuex'
];
module.exports = {
entry: {
vendor: vendors
},
output: {
path: path.join(__dirname, "dist"),
filename: "Dll.js",
library: "[name]_[hash]"
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, "dist", "manifest.json"),
name: "[name]_[hash]",
context: __dirname
})
]
};这个文件的作用是将 vue、vue-router 以及 vuex 合并打包为一个名为 Dll.js 的静态资源包，同时生成一个 manifest.json 文件方便对 Dll.js 中的模块进行引用。
要注意的是，执行 webpack 命令是默认执行该目录下名为 webpack.config.js 或者 webpackfile.js 的文件。所以需要通过 --config 指令手动指定该文件，最后加入 -p 指令将 Dll.js 压缩。
$ webpack --config webpack.dll.config.js -p
这样，在项目根目录下就会多增加一个 dist 文件夹，其中有压缩之后的 Dll.js 与 manifest.json 文件。
manifest.json 文件内容如下，给各个模块赋予 id 以便引用。
{
"name": "vendor_2beb750db72b1cda4321",
"content": {
"./node_modules/process/browser.js": {
"id": 0,
"meta": {}
},
"./node_modules/vue-router/dist/vue-router.esm.js": {
"id": 1,
"meta": {
"harmonyModule": true
},
"exports": [
"default"
]
},
"./node_modules/vue/dist/vue.runtime.esm.js": {
"id": 2,
"meta": {
"harmonyModule": true
},
"exports": [
"default"
]
},
//.......最后在 webpack.config.js 中添加引用。在 plugins 属性中添加 DllReferencePlugin 插件，并指明 manifest.json 文件的引用路径。
//...
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./dist/manifest.json')
})
]在确保成功执行 webpack.dll.config.js 文件后，执行 webpack -p 进行项目打包。
可以看到打包在 Dll 文件中的文件都被 delegated(委派) ，而不是直接打进 bundle 文件中。
这样我们就将所有的资源完成打包，生成的 dist 目录如下：
不过 dist 文件夹要想作为一个完整的工程还少一个 html 文件，我创建了一个名为 pack.js 的文件，使用 nodejs 的 fileSystem 对 html 文件进行修改并拷贝。
pack.js
var fs = require('fs');
fs.readFile('./index.html', 'utf8', (err, data) => {
if (!err) {
var dataStr = data.toString(),
timestamp = (new Date()).getTime();
dataStr = dataStr
.replace('bundle.js', 'bundle.js?v='+timestamp)
.replace('<!-- dll -->', '<script src="./dist/Dll.js?v='+ timestamp +'"></script>');
fs.writeFile('./dist/index.html', dataStr, (error) => {
if (!error) {
console.log('HTML file copy successfully');
} else {
console.log(error);
}
});
} else {
console.log(err);
}
});我们需要在模块的入口 html 中添加 的占位字符，pack.js 的作用就是将 html 文件拷贝一份到 dist 目录下，同时将 替换为引用 Dll.js 的 script 标签，并在引用文件后添加时间戳。
<!-- .... --> <body> <p id="demo" class="container"></p> <!-- dll --> <script src="./bundle.js"></script> </body> </html>
在执行 webpack -p 打包后，输入下面命令运行 pack.js，就会在 dist 目录下生成 html 文件。
$ node pack.js
内容如下：
<!-- .... --> <body> <p id="demo" class="container"></p> <script src="./dist/Dll.js?v=1488250309725"></script> <script src="./bundle.js?v=1488250309725"></script> </body> </html>
这样 dist 文件夹就作为一个完整的、不需要任何手动操作、已经压缩混淆后的项目可以直接进行线上的部署。
实际项目模板参考地址如下。由于笔者作为 React 与 Vue 的双持开发者，所以创建了两个模板，以便之后通过 yomen(yo) 之类的进行脚手架工具化。
相关推荐：
vue、vuecli、webpack中使用mockjs模拟后端数据
Atas ialah kandungan terperinci webpack性能优化. 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
Perbandingan prestasi Windows 10 vs. Windows 11: Mana satu yang lebih baik?
Mar 28, 2024 am 09:00 AM
Perbandingan prestasi Windows 10 vs. Windows 11: Mana satu yang lebih baik? Dengan pembangunan dan kemajuan teknologi yang berterusan, sistem pengendalian sentiasa dikemas kini dan dinaik taraf. Sebagai salah satu pembangun sistem pengendalian terbesar di dunia, siri sistem pengendalian Microsoft Windows sentiasa menarik perhatian ramai pengguna. Pada tahun 2021, Microsoft mengeluarkan sistem pengendalian Windows 11, yang mencetuskan perbincangan dan perhatian yang meluas. Jadi, apakah perbezaan prestasi antara Windows 10 dan Windows 11?
Membandingkan prestasi sistem Win11 dan Win10, yang manakah lebih baik?
Mar 27, 2024 pm 05:09 PM
Sistem pengendalian Windows sentiasa menjadi salah satu sistem pengendalian yang paling banyak digunakan pada komputer peribadi, dan Windows 10 telah lama menjadi sistem pengendalian perdana Microsoft sehingga baru-baru ini apabila Microsoft melancarkan sistem Windows 11 baharu. Dengan pelancaran sistem Windows 11, orang ramai mula berminat dengan perbezaan prestasi antara sistem Windows 10 dan Windows 11 yang mana satu yang lebih baik antara kedua-duanya? Pertama, mari kita lihat W
Pemproses Kirin 8000 bersaing dengan siri Snapdragon: Siapa yang boleh menjadi raja?
Mar 25, 2024 am 09:03 AM
Dalam era Internet mudah alih, telefon pintar telah menjadi bahagian yang sangat diperlukan dalam kehidupan seharian manusia. Prestasi telefon pintar selalunya secara langsung menentukan kualiti pengalaman pengguna. Sebagai "otak" telefon pintar, prestasi pemproses amat penting. Di pasaran, siri Qualcomm Snapdragon sentiasa mewakili prestasi kukuh, kestabilan dan kebolehpercayaan, dan baru-baru ini Huawei turut melancarkan pemproses Kirin 8000 sendiri, yang dikatakan mempunyai prestasi cemerlang. Bagi pengguna biasa, cara memilih telefon bimbit dengan prestasi yang kukuh telah menjadi isu utama. Hari ini kita akan
Perbandingan bahasa PHP dan Go: perbezaan prestasi yang besar
Mar 26, 2024 am 10:48 AM
PHP dan Go ialah dua bahasa pengaturcaraan yang biasa digunakan, dan ia mempunyai ciri dan kelebihan yang berbeza. Antaranya, perbezaan prestasi merupakan isu yang dibimbangkan oleh semua orang. Artikel ini akan membandingkan bahasa PHP dan Go dari perspektif prestasi, dan menunjukkan perbezaan prestasi mereka melalui contoh kod tertentu. Mula-mula, mari kita perkenalkan secara ringkas ciri asas PHP dan bahasa Go. PHP ialah bahasa skrip yang pada asalnya direka untuk pembangunan web Ia mudah dipelajari dan digunakan dan digunakan secara meluas dalam bidang pembangunan web. Bahasa Go ialah bahasa tersusun yang dibangunkan oleh Google.
Prestasi larian tempatan perkhidmatan Embedding melebihi OpenAI Text-Embedding-Ada-002, yang sangat mudah!
Apr 15, 2024 am 09:01 AM
Ollama ialah alat super praktikal yang membolehkan anda menjalankan model sumber terbuka dengan mudah seperti Llama2, Mistral dan Gemma secara tempatan. Dalam artikel ini, saya akan memperkenalkan cara menggunakan Ollama untuk mengvektorkan teks. Jika anda belum memasang Ollama secara tempatan, anda boleh membaca artikel ini. Dalam artikel ini kita akan menggunakan model nomic-embed-text[2]. Ia ialah pengekod teks yang mengatasi prestasi OpenAI text-embedding-ada-002 dan text-embedding-3-small pada konteks pendek dan tugas konteks panjang. Mulakan perkhidmatan nomic-embed-text apabila anda telah berjaya memasang o
Pembalikan nilai kunci tatasusunan PHP: analisis perbandingan prestasi kaedah yang berbeza
May 03, 2024 pm 09:03 PM
Perbandingan prestasi kaedah membalik nilai kunci tatasusunan PHP menunjukkan bahawa fungsi array_flip() berprestasi lebih baik daripada gelung for dalam tatasusunan besar (lebih daripada 1 juta elemen) dan mengambil masa yang lebih singkat. Kaedah gelung untuk membalikkan nilai kunci secara manual mengambil masa yang agak lama.
Perbandingan prestasi rangka kerja Java yang berbeza
Jun 05, 2024 pm 07:14 PM
Perbandingan prestasi rangka kerja Java yang berbeza: Pemprosesan permintaan REST API: Vert.x adalah yang terbaik, dengan kadar permintaan 2 kali SpringBoot dan 3 kali Dropwizard. Pertanyaan pangkalan data: HibernateORM SpringBoot adalah lebih baik daripada Vert.x dan ORM Dropwizard. Operasi caching: Pelanggan Hazelcast Vert.x lebih unggul daripada mekanisme caching SpringBoot dan Dropwizard. Rangka kerja yang sesuai: Pilih mengikut keperluan aplikasi Vert.x sesuai untuk perkhidmatan web berprestasi tinggi, SpringBoot sesuai untuk aplikasi intensif data, dan Dropwizard sesuai untuk seni bina perkhidmatan mikro.
Bagaimana untuk mengoptimumkan prestasi program berbilang benang dalam C++?
Jun 05, 2024 pm 02:04 PM
Teknik berkesan untuk mengoptimumkan prestasi berbilang benang C++ termasuk mengehadkan bilangan utas untuk mengelakkan perbalahan sumber. Gunakan kunci mutex ringan untuk mengurangkan perbalahan. Optimumkan skop kunci dan minimumkan masa menunggu. Gunakan struktur data tanpa kunci untuk menambah baik keselarasan. Elakkan sibuk menunggu dan maklumkan urutan ketersediaan sumber melalui acara.
