preface

Sometimes, after developing a Vue project, you find that the project package is too big and slow to pack, and there are many redundant files, such as images,.vue files,.js files, etc. If you have similar problems, or you want your project package to be smaller and faster, this article may help you.

Make the project smaller

Compress packaged files

Package installation

npm i compression-webpack-plugin@5.0. 0 -D / cnpm i compression-webpack-plugin@5.0. 0 -D /yarn add compression-webpack-plugin@5.0. 0
Copy the code

Webapack configuration

module.exports = {
  ...
  chainWebpack:config= > {
    config.plugin('compression')
      .use(
      new CompressionWebpackPlugin(
        {
          filename: info= > {
            return `${info.path}.gz${info.query}`
          },
          algorithm: 'gzip'.threshold: 10240.test: /\.(js|css|json|txt|html|ico|svg)(\? . *)? $/i,
          minRatio: 0.8.deleteOriginalAssets: true}))}}Copy the code

It is recommended to be used in the production environment

Delete unnecessary files

Package installation

npm i useless-files-webpack-plugin -D / cnpm i useless-files-webpack-plugin -D /yarn add useless-files-webpack-plugin
Copy the code

Webapack configuration

module.exports = {
  ...
  chainWebpack = config= > {
    config.plugin('uselessFile')
      .use(
        new UselessFile({
          root: path.resolve(__dirname,'./src/assets/images'), 
          clean:true.exclude: /node_modules/}}}))Copy the code

Recommended for production environment

Ignore moment localization

Webpack configuration

module.exports = {
  ...
  chainWebpack : config= >{
    config.plugin('IgnorePlugin')
      .use(new webpack.IgnorePlugin(/^\.\/locale$/./moment$/))}}Copy the code

Load elements on demand

Babel.config.js

module.exports = {
  ...
  plugins:[
    [
      "component",
      {
        libraryName: "element-ui".styleLibraryName: "theme-chalk"}}]]Copy the code

Import components as needed

import Vue from 'vue'
import { Dialog } from 'element-ui'
Vue.use(Dialog)

Copy the code

Load Echart on demand

Babel.config.js

module.exports = {
  ...
  plugins:[
   ...
   'equire']}Copy the code

Use Echart on demand

// eslint-disable-next-line
const echarts = equire([
  "line"."bar"
])
export default echarts
Copy the code

Load loadsh as required

Babel.config.js

module.exports = {
  ...
  plugins:[
   ...
   'lodash']}Copy the code

Webpack configuration

module.exports = {
  ...
  chainWebpack: config= >{... config.plugin('loadshReplace')
      .use(new LodashModuleReplacementPlugin())
  }
}

Copy the code

Make project packaging faster

Delete prefetch and preload

Webapack configuration

module.exports = {
  ...
  chainWebpack: config= >{
    config.plugins.delete('prefetch')
    config.plugins.delete('preload')}}Copy the code

It depends on your project/needs

Enable multi-threaded packaging (HappyPack)

Package installation

npm i happypack -D / cnpm i happypack -D /yarn add happypack

Copy the code

Webpack configuration

const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
module.exports = {
  ...
  chainWebpack: config= >{...const jsRule = config.module.rule('js')
      jsRule.uses.clear()
      jsRule.use('happypack/loader? id=babel')
          .loader('happypack/loader? id=babel')
          .end()
    config.plugins.push(
      new HappyPack({
        id:'babel'.loaders: ['babel-loader? cacheDirectory=true'].threadPool:happyThreadPool
      })
    )
  }
}

Copy the code

Use it according to your project

Dynamic chain packing

webpack.dll.config

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

module.exports = {
  entry: {
    vendor: ['vue'.'vue-router'.'axios'.'echarts'.'element-ui'.'moment'.'sortablejs'] // Third-party packages
  },

  output: {
    filename: '[name].dll.js'.path: path.resolve(__dirname, 'dll'),
    library:'[name]_lib'
  },

  plugins: [
    new webpack.DllPlugin({
      path: path.resolve(__dirname, 'dll/[name]-manifest.json'),
      name: '[name]_lib'}})]Copy the code

Run the file and get the compiled code

webpack --config webpack.dll.config.js
Copy the code

Webpack configuration

module.exports = {
  ...
  configureWebpack: config= > {
      config.plugins.push(
        new webpack.DllReferencePlugin({
          manifest: path.resolve(__dirname, 'dll/vendor-manifest.json')
        })
      )
      config.plugins.push(
        new AddAssetHtmlPlugin({ filepath: path.resolve(__dirname,'dll/vendor.dll.js')}))}}Copy the code

end

The above is a bit of vUE project packaging optimization knowledge accumulated by the author for his own project or the company’s project. Maybe you have better optimization points or better optimization schemes. Welcome to provide cases and learn from them.