Panduan pengoptimuman keluaran pembungkusan Vue-cli dan Webpack

Dengan pembangunan berterusan teknologi bahagian hadapan Web, Vue.js telah menjadi rangka kerja bahagian hadapan yang sangat popular. Vue-cli dan Webpack dalam Vue.js juga telah menjadi alat sokongan yang diperlukan sebagai alat binaan. Apabila membangunkan projek, kami biasanya menggunakan Vue-cli untuk membina rangka kerja aplikasi dan menggunakan Webpack untuk membungkus dan menerbitkan projek. Walau bagaimanapun, dalam proses pembungkusan dan pengeluaran projek besar, disebabkan saiz projek yang besar, masalah seperti kelajuan penyusunan yang perlahan, jumlah pembungkusan yang besar, dan kelajuan akses yang perlahan mungkin berlaku untuk mengelakkan masalah ini, artikel ini akan diperkenalkan Pembungkusan Vue-cli dan Webpack Keluarkan panduan pengoptimuman untuk membantu pembangun mengoptimumkan kesan keluaran projek besar dengan lebih baik.

1. Pengoptimuman projek Vue-cli

1. Memperkenalkan komponen pihak ketiga mengikut keperluan

Semasa proses pembangunan, kami biasanya menggunakan jQuery, Bootstrap, Perpustakaan pihak ketiga seperti Echarts, tetapi memperkenalkan keseluruhan perpustakaan boleh menyebabkan masalah seperti saiz pembungkusan yang berlebihan dan kelajuan akses yang perlahan. Oleh itu, kita boleh menggunakan pemalam babel-plugin-component untuk memperkenalkan atas permintaan.

ditetapkan dalam babel.config.js:

plugins: [
  ['component', {
    libraryName: 'element-ui',
    styleLibraryName: 'theme-chalk'
  }]
]

Mengambil Element-ui sebagai contoh, menggunakan pemalam untuk memperkenalkan perpustakaan atas permintaan boleh mengurangkan jumlah pembungkusan.

2. Mengkonfigurasi sifat Webpack

Kami boleh mengubah suai sifat konfigurasi Webpack dengan mengubah suai fail vue.config.js. Berikut ialah beberapa kaedah konfigurasi atribut Webpack yang biasa digunakan:

// 修改输出文件名格式
output: {
  filename: '[name].[hash].js'
}

// 修改 publicPath
publicPath: process.env.NODE_ENV === 'production' ?
  '/production-sub-path/' : '/'

// 压缩代码
uglifyOptions: {
  compress: {
    warnings: false,
    drop_console: true,
    drop_debugger: true,
    dead_code: true
  }
}

// 配置 externals，将大型的第三方库从打包代码中剥离
externals: {
  'vue': 'Vue',
  'jquery': 'jQuery',
  'bootstrap': 'Bootstrap',
  'echarts': 'echarts',
  'moment': 'moment'
}

// 使用 Webpack-bundle-analyzer 查看打包后的各个模块的大小
configureWebpack: {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

2 Pengoptimuman Webpack

1. Menggunakan binaan berbilang benang

Menggunakan binaan berbilang benang. boleh sangat Untuk meningkatkan kelajuan pembungkusan, anda boleh menggunakan pemalam happypack untuk melaksanakan binaan berbilang benang. Untuk menggunakan pemalam ini, anda perlu memasang happypack:

npm install happypack -D

dan kemudian ubah suai fail konfigurasi asal:

module: {
  rules: [
    {
      test: /.js$/,
      loader: 'babel-loader'
    },
    ...
  ]
}

kepada:

const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module: {
  rules: [
    {
      test: /.js$/,
      exclude: /node_modules/,
      loader: 'happypack/loader?id=happyBabel'
    },
    ...
  ]
},
plugins: [
  new HappyPack({
    id: 'happyBabel',
    loaders: ['babel-loader'],
    threadPool: happyThreadPool,
    verbose: true
  })
]

Gunakan happypack pemalam untuk membolehkannya binaan berbilang benang.

2. Gunakan teknologi DllPlugin dan DllReferencePlugin

Teknologi DllPlugin dan DllReferencePlugin terutamanya membungkus beberapa perpustakaan yang tidak kerap berubah menjadi fail lib, supaya setiap kali ia dibungkus, Terdapat tidak perlu membungkus fail perpustakaan ini, anda hanya perlu menggunakan DllReferencePlugin untuk memperkenalkannya kemudian.

Penggunaan:

1. Konfigurasikan DllPlugin dahulu:

const path = require('path');
const webpack = require('webpack');
const dllPath = 'static/dll';

module.exports = {
  entry: {
    vendor: ['vue', 'vue-router', 'vuex', 'axios', 'lodash'] // 需要单独打包的库
  },
  output: {
    path: path.join(__dirname, `../${dllPath}`),
    filename: '[name].dll.js',
    library: '[name]_[hash]'  // 暴露全局变量，避免前后两次打包，库名字变更
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_[hash]',
      path: path.join(__dirname, `../${dllPath}`, 'manifest.json')
    })
  ]
};

2. Laksanakan pembungkusan:

cross-env NODE_ENV=production webpack --config ./build/webpack.dll.js --progress --hide-modules

3. Gunakan index.html dalam <script> untuk memperkenalkan fail perpustakaan yang dijana:

<script src="<%= BASE_URL %>static/dll/vendor.dll.js"></script>

4. Konfigurasikan DllReferencePlugin:

const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
const path = require('path');

plugins: [
  new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require(path.join(__dirname, './static/dll/manifest.json'))
  }),
  new AddAssetHtmlWebpackPlugin({
    filepath: path.resolve(__dirname, './static/dll/*.dll.js')
  })
]

Pemalam boleh diperkenalkan secara automatik dalam halaman Dijana fail Dll.

Ringkasan:

Melalui kaedah di atas, kami boleh mengoptimumkan Vue-cli dan Webpack untuk menjadikan pembungkusan projek kami lebih kecil dan lebih pantas. Sudah tentu, kaedah di atas bukanlah peluru perak, dan kaedah pengoptimuman khusus perlu diselaraskan mengikut syarat khusus projek. Saya harap artikel ini dapat membantu semua orang semasa membungkus dan menerbitkan projek.

Atas ialah kandungan terperinci Panduan pengoptimuman keluaran pembungkusan Vue-cli dan Webpack. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!