webpack 生产环境构建

在开发阶段，我们通常会使用 webpack-dev-server 来快速启动一个本地服务器，方便调试和开发。但是在将项目部署到生产环境时，我们需要对项目进行优化，以提高性能和减少文件大小。

1. 压缩代码

在生产环境下，我们通常会使用 UglifyJSPlugin 插件来压缩 JavaScript 代码，以减少文件大小并提高加载速度。

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // 其他配置
  plugins: [
    new UglifyJSPlugin()
  ]
};

2. 分离 CSS

为了减少页面加载时间，我们可以将 CSS 代码从 JavaScript 中分离出来，这样浏览器可以并行加载资源，提高页面加载速度。

-- -------------------- ---- -------
----- ----------------- - ---------------------------------------

-------------- - -
  -- ----
  ------- -
    ------ -
      -
        ----- ---------
        ---- ---------------------------
          --------- ---------------
          ---- ------------
        --
      -
    -
  --
  -------- -
    --- -------------------------------
  -
--

3. 使用 source map

在生产环境中，我们通常会关闭 devtool 选项以禁用 source map，以减少打包时间和文件大小。但是在需要调试时，可以选择使用 cheap-source-map 或 source-map 选项。

module.exports = {
  // 其他配置
  devtool: 'cheap-source-map'
};

4. 去除无用代码

在生产环境中，我们可以使用 Tree Shaking 技术去除无用代码，减少文件大小。

module.exports = {
  // 其他配置
  optimization: {
    usedExports: true
  }
};

通过以上优化措施，我们可以在生产环境下获得更好的性能和用户体验。