# 编译打包

# Webpack

简单的说，任何在打包工具上优化手段无非就是围绕两点进行的：编译速度和包体积。

目前在 vue 项目中，针对这两点我们做了如下的一些事情：

# 编译速度

# .env.development.local 文件

# 不使用路由懒加载的，因为这样会导致热更新速度变慢,
# 实现逻辑和原理与之前还是一样的，还是基于 plugins babel-plugin-dynamic-import-node
VUE_CLI_BABEL_TRANSPILE_MODULES = true

1
2
3
4
5

// webpack.base.config.js
const HappyPack = require('happypack')
const OS = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: OS.cpus().length })

const path = require('path')
const resolve = dir => path.join(__dirname, dir)

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [resolve('src')],
        exclude: /node_modules/,
        use: 'happypack/loader?id=js'
      },
      {
        test: /\.styl$/,
        include: [resolve('src')],
        exclude: /node_modules/,
        use: 'happypack/loader?id=stylus'
      }
    ]
  },
  plugins: [
    // HappyPack 可以将 Loader 的同步执行转换为多线程并行的，这样就能充分利用系统资源来加快打包效率了
    new HappyPack({
      id: 'js',
      loaders: ['babel-loader'],
      threadPool: happyThreadPool
    }),
    new HappyPack({
      id: 'stylus',
      loaders: ['stylus-loader'],
      threadPool: happyThreadPool
    })
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

// webpack.dev.config.js
const merge = require('webpack-merge')
const base = require('./webpack.base.conf.js')
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')

const path = require('path')
const resolve = dir => path.join(__dirname, dir)

module.exports = merge(base, {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader?cacheDirectory',
        include: [resolve('src') ,resolve('node_modules/webpack-dev-server/client')]
      }
    ]
  },
  plugins: [new HardSourceWebpackPlugin()]
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// webpack.prod.config.js
const TerserPlugin = require('terser-webpack-plugin')
// const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin').default
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

const merge = require('webpack-merge')
const base = require('./webpack.base.conf.js')
const path = require('path')
// const resolve = dir => path.join(__dirname, dir)

module.exports = merge(base, {
  mode: 'production',
  entry: {
    // 需要统一打包的类库
    vendor: ['vue', 'vuex', 'vue-router', 'axios', 'vue-i18n', 'element-ui']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [path.resolve('node_modules/resize-detector')]
      }
    ]
  },
  plugins: [
    // 提高webpack的tree-shaking的效率
    // new WebpackDeepScopeAnalysisPlugin(),
    // 文件结构可视化，找出导致体积过大的原因
    // new BundleAnalyzerPlugin()
  ],
  optimization: {
    minimizer: [
      new TerserPlugin({
        cache: '.cache/',
        parallel: true,
        terserOptions: {
          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
          compress: {
            drop_console: true, // 删除console语句
            drop_debugger: true // 移除debugger语句
          }
        }
      })
    ]
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

← 解决方案