vue DllPluginプラグインによるパッケージング性能の最適化により、パッケージング時間を短縮(vue-cliベース)

1630 ワード

Step 1:buildフォルダの下にwebpackを新規作成します.dll.conf.jsファイル(webpack.base.conf.jsと同級)

const path = require('path')
const webpack = require('webpack');

module.exports = {

output: {
    filename: 'dll/[name].dll.js',
    path: path.resolve(__dirname, '../static/js/'),
    library: '[name]_library', //   Dll                           ，   DllPlugin name      
},
plugins: [
    new webpack.DllPlugin({
    path: path.resolve(__dirname, './manifest.json'), //  Dll         ， DllReferencePlugin    
    name: '[name]_library',
    }),
],
}

step 2:webpack.base.conf.jsファイルでの構成

const webpack = require('webpack')

module.exports = {
    entry: {
        app: './src/main.js'
    },
   //.......
    plugins: [
        new webpack.DllReferencePlugin({
            context: path.resolve(__dirname, '..'),
            manifest: require('./manifest.json')
        })
    ],

}

Step 3:package.jsonファイルscriptに追加

"scripts": {
    "dll": "webpack -p --progress --config build/webpack.dll.conf.js",
},

Step 4:index.htmlにvendorを導入するdll.jsファイル

Step 5:パッケージのにnpm run dllをにします(package.jsonでdependenciesのパッケージ(つまりimportでされたパッケージ)がしないり、だけします).

npm run dll（       ）

npm run build（        ，          ）