머리말
최근에 vue3.0을 사용 해보고 개발 패키징과 일반화 및 패키징 컴파일 효율성을 고려하여 작은 데모를 만들었습니다. 오늘은 점점 더 많은 요구 사항과 구성 요소가 작성된 후 웹팩 빌드를 개선하는 방법을 기록 할 것입니다. 속도 및 dll 파일 추출 현재 vue-cli3.x 용으로 빌드 된 프로젝트의 구성.
DLLPLUGIN 및 DLLREFERENCEPLUGIN이란?
패키징에 webpack을 사용할 때 수정되지 않는 vue, vuex 등과 같은 종속 타사 라이브러리의 경우 자체 코드와 별도로 패키징 할 수 있습니다.이 점의 장점은 매번 로컬 코드를 변경한다는 것입니다. Webpack은 타사 라이브러리를 컴파일하는 대신 내 프로젝트 자체의 파일 코드 만 패키징하면됩니다. 그러면 타사 라이브러리는 처음 패키징 될 때 한 번만 패키징됩니다. 앞으로 업그레이드하지 않는 한 써드 파티 패키지 그 때 webpack은 이러한 라이브러리를 패키징하지 않으므로 패키징 속도를 빠르게 높일 수 있습니다. 그래서이 문제를 해결하기 위해 DllPlugin과 DllReferencePlugin 플러그인이 제작되었습니다.
따라서 현재 웹팩 커뮤니티의 경우 직접 작성한 코드를 분리하려는 경우 웹팩 커뮤니티는 두 가지 솔루션을 제공합니다.
- CommonsChunkPlugin
- DLLPlugin
CommonsChunkPlugin 플러그인은 패키징 될 때마다 일부 타사 종속 라이브러리를 계속 처리하지만 타사 라이브러리 파일을 코드에서 분리하고 별도의 js 파일을 생성 할 수 있습니다. 그러나 여전히 포장 속도를 향상시킬 수는 없습니다. vue3.x의 vue.config 구성 파일에서 공식 웹 사이트에서 최적화 구성을 찾을 수 있습니다.이 구성은 매우 실용적입니다. 특정 작업은 여기에서 소개하지 않습니다. 최적화 구성은 공식 웹 사이트 에서 확인할 수 있습니다.
DLLPlugin 은 타사 라이브러리 코드를 분리 할 수 있으며 파일이 변경 될 때마다 프로젝트 자체의 코드 만 패키징합니다. 따라서 포장 속도가 더 빨라질 것입니다.
DLLPlugin 플러그인은 추가 독립 웹팩 설정에서 dll 전용 번들을 생성합니다. 즉, 프로젝트 루트 디렉토리에 webpack.config.js 외에 webpack.dll.config.js 파일도 생성됩니다. webpack.dll.config.js의 기능은 모든 타사 라이브러리 종속성을 번들 dll 파일로 압축하고 manifest.json이라는 파일을 생성하는 것입니다.
manifest.json의 기능은 DllReferencePlugin을 관련 종속성에 매핑하는 것입니다.
DllReferencePlugin 플러그인 은 webpack.config.js 에서 사용됩니다. 플러그인의 역할은 webpack.dll.config.js에서 방금 패키징되고 생성 된 dll 파일을 필요한 사전 컴파일 된 종속성에 참조하는 것입니다. 그게 무슨 뜻입니까? 즉, webpack.dll.config.js에서 패키징 한 후 예를 들어 vendor.dll.js 파일과 vendor-manifest.json 파일이 생성되고 vendor.dll.js 파일에는 모든 타사 라이브러리 파일이 포함됩니다. vendor-manifest.json 파일 모든 라이브러리 코드의 색인이 포함됩니다 .webpack.config.js 파일을 사용하여 DllReferencePlugin 플러그인을 패키징하면 DllReferencePlugin 플러그인을 사용하여 vendor-manifest.json을 읽습니다. 타사 라이브러리가 있는지 확인하십시오. vendor-manifest.json 파일은 타사 라이브러리의 매핑 일뿐입니다.
따라서 처음으로 webpack.dll.config.js 파일을 사용하여 타사 라이브러리를 패키징하면 패키징이 완료된 후 다시 패키징되지 않고 webpack.config.js 파일을 실행할 때마다 프로젝트 자체가 패키지화됩니다. 타사 종속성을 사용해야하는 경우 DllReferencePlugin 플러그인을 사용하여 타사 종속 라이브러리를 읽습니다. 따라서 포장 속도가 크게 향상됩니다.
프로젝트에서 DLLPLUGIN 및 DLLREFERENCEPLUGIN을 사용하는 방법
vue3.x의 스캐 폴딩이기 때문에 여기에 vue.config의 구성 방법이 있습니다. 실제로 vue2.x의 스캐 폴딩을 사용하더라도 디렉토리가 다르며 방법은 동일합니다. 이러한 작업은 웹팩에 의해 수행됩니다.
먼저 다음과 같이 루트 디렉터리에 webpack.dll.conf js 파일 코드를 만듭니다.
const path = require('path')
const webpack = require('webpack')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// dll文件存放的目录(建议存放到public中)
const dllPath = './public/vendor'
module.exports = {
mode: 'production',
entry: {
vendor: ['vue/dist/vue.runtime.esm.js', 'vuex', 'vue-router', 'element-ui', 'axios', 'moment']
},
output: {
filename: '[name].dll.js',
path: path.resolve(__dirname, dllPath),
library: '[name]_[hash]'
},
plugins: [
new CleanWebpackPlugin(),
new webpack.DllPlugin({
name: '[name]_[hash]',
path: path.join(__dirname, dllPath, '[name].manifest.json'),
context: process.cwd()
})
]참고 : 프로젝트 패키지의 웹팩이 3.x인지 모르겠습니다. 프로젝트에 webpack-cli를 설치해야합니다. npm i webpack-cli -D**
위의 코드에서와 같이 매번 마지막 폴더를 정리하는 clean-webpack-plugin 플러그인도 사용합니다.
DllPlugin 플러그인에는 다음과 같은 세 가지 구성 항목 매개 변수가 있습니다.
컨텍스트 (선택 사항) : 매니페스트 파일에서 요청 된 컨텍스트, 기본값은 웹팩 파일 컨텍스트입니다.
name : output.library와 일치 하는 공용 dll 함수 의 이름입니다 .
경로 : manifest.json 생성 파일의 위치 및 파일 이름입니다.
그런 다음 "dll": "webpack -p --progress --config ./webpack.dll.config.js"필요할 때 별도로 패키지를 추출 할 수 있도록 패키지의 스크립트에서 명령을 구성해야 합니다.
초점은 다음과 같습니다. vue.config.js는 다음과 같이 구성됩니다.
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
function resolve(dir) {
return path.join(__dirname, dir)
}
const dllReference = (config) => {
config.plugin('vendorDll')
.use(webpack.DllReferencePlugin, [{
context: __dirname,
manifest: require('./public/vendor/vendor.manifest.json')
}])
config.plugin('addAssetHtml')
.use(AddAssetHtmlPlugin, [
[
{
filepath: resolve(__dirname, 'public/vendor/vendor.dll.js'),// dll文件位置
outputPath: 'vendor',// dll最终输出的目录
publicPath: '/vendor'// dll 引用路径
}
]
])
.after('html')
}
module.exports = {
true......
truechainWebpack: config => {
dllReference(config)
},
}add-asset-html-webpack-plugin을 사용하여 템플릿 / html을 수동으로 수정하는 단계를 저장합니다.
DllReferencePlugin 항목의 매개 변수는 다음과 같습니다.
context : 매니페스트 파일에서 요청 된 컨텍스트.
매니페스트 : 컴파일 타임에 JSON을로드하기위한 매니페스트의 절대 경로입니다.
컨텍스트 : 모듈 ID에 대한 요청 매핑 (기본값은 manifest.content)
이름 : dll 의 노출 된 위치 이름 (기본값은 manifest.name)
범위 : dll의 콘텐츠 접두사.
sourceType : dll이 libraryTarget을 노출하는 방법.
효과
DllPlugin을 사용하여 패키징하기 전 32.065 초
DllPlugin으로 패키징 한 후 8.524 초가 걸립니다.