使用Webpack分离第三方库和应用代码

Webpack是一个强大的模块打包工具，可以帮助我们将JavaScript应用程序打包成小块的、优化过的静态资源，从而提高网页加载速度。在开发大型应用时，我们经常会引入各种第三方库，为了优化打包结果，我们可以考虑将第三方库和应用代码分离打包。

为什么要分离第三方库和应用代码？

将第三方库和应用代码分离打包，有以下几个好处：

缩小打包文件体积：第三方库通常体积较大，将其与应用代码分离打包，可以减小应用代码的体积，提高加载速度。
利用浏览器缓存：第三方库通常是稳定的，很少需要更新，将其打包成单独的文件，在后续的访问中可以直接使用缓存，避免重复下载。
提高构建速度：如果应用代码和第三方库打包在一起，每次修改应用代码都会触发第三方库的重新打包，耗费时间。将其分开打包，可以节省构建时间。

实现方法

下面我们使用Webpack来实现第三方库和应用代码的分离。

设置入口文件

在Webpack配置文件中，我们需要设置入口文件。我们可以将第三方库和应用代码分别设置为不同的入口文件。

module.exports = {
  entry: {
    vendor: ['react', 'react-dom'], // 第三方库入口
    app: './src/index.js' // 应用代码入口
  },
  // ...
}

设置插件

为了将第三方库和应用代码分开打包，我们需要使用CommonsChunkPlugin插件。

const webpack = require('webpack');

module.exports = {
  entry: {
    vendor: ['react', 'react-dom'], // 第三方库入口
    app: './src/index.js' // 应用代码入口
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity
    })
  ],
  // ...
}

在上面的配置中，我们将第三方库的入口名设置为vendor，并且通过minChunks: Infinity来确保只有第三方库打包在此入口文件中。

设置输出文件

最后，我们需要设置输出文件，将第三方库和应用代码分别打包到不同的文件中。

module.exports = {
  entry: {
    vendor: ['react', 'react-dom'], // 第三方库入口
    app: './src/index.js' // 应用代码入口
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity
    })
  ],
  output: {
    filename: '[name].bundle.js', // 输出文件名
    path: path.resolve(__dirname, 'dist') // 输出文件路径
  },
  // ...
}

在上面的配置中，我们使用了[name]作为输出文件名的占位符，Webpack将会根据入口文件的名称生成相应的输出文件。

加载插件

最后，我们需要安装所需的插件。

npm install webpack webpack-cli webpack-dev-server --save-dev
npm install react react-dom --save

运行Webpack

配置好Webpack后，我们可以通过运行webpack命令来打包我们的代码。

npx webpack

打包完成后，你可以在dist文件夹中找到打包好的文件。

结论

使用Webpack分离第三方库和应用代码可以优化打包结果，提高网页加载速度。通过将第三方库和应用代码分开打包，并合理利用浏览器缓存，可以提升用户体验和开发效率。

本文来自极简博客，作者：星辰漫步，转载请注明原文链接：使用Webpack分离第三方库和应用代码