1v1视频聊天源码，组件按需加载在资源加载放面上大分

1v1视频聊天源码，组件按需加载在资源加载放面上大分
webpack将打包资源都打包在了一个bundle.js中，其中主要包含了开发的源代码 和 第三方依赖node_modules。
我们可以对node_modules第三方依赖 打包资源拆分细化成多个资源文件，借助浏览器支持HTTP同时发起多个请求特性，使得资源异步并行加载，从而提高资源加载速度。 webpack提供了splitChunks来支持这一配置。
1. 首先引入按需加载工具 babel-plugin-import
babel-plugin-import是babel它会在编译过程中将 import 的写法自动转换为按需引入的方式。

npm install babel-plugin-import --save-dev

2. 在项目根目录创建.babelrc文件并配置按需加载内容:

{
 "plugins": [["import", {
  "libraryName": "iview",
  "libraryDirectory": "src/components"
 }]]
}

3. webpack配置：

// webpack.config.js
module.exports = function ({ production = false, development = false }) {
  ...
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'static/js/[name].[contenthash:8].js', // 主文件分割出的文件命名
    chunkFilename: 'static/js/[name].[contenthash:8].chunk.js', // splitChunks 分割出的文件命名
  },
  
  optimization: {
      minimize: true,
      ...
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          default: false,
          vendors: false,
          // 多页面应用，或者 webpack import() 多个 chunk 文件中，有 import 其他模块两次或者多次时，会打包生成 common
          common: {
            chunks: "all",
            minChunks: 2,
            name: 'common',
            enforce: true,
            priority: 5
          }, 
          // node_modules 中的公共模块抽离
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            chunks: 'initial',
            enforce: true,
            priority: 10,
            name: 'vendor'
          },
          // @materual-ui
          material: {
            name: 'chunk-material',
            priority: 20, // 优先级高于 vendor
            test: /[\\/]node_modules[\\/]_?@material-ui(.*)/
          },
        }
      },
      runtimeChunk: { // 运行时代码（webpack执行时所需的代码）从主文件中抽离
        name: entrypoint => `runtime-${entrypoint.name}`,
      },
    },
})

4. 在main.js配置项目需要加载的组件
下面是iview的一个例子:

Vue.component("Icon", Icon)
Vue.component("Notice", Notice)
Vue.component("Button", Button)

这里需要注意全局注册的组件需要挂在到vue原型上，例如我们需要使用Notice组件，那我就需要

Vue.prototype.$Notice = Notice;

这样我们就可以正常的使用iview的组件了。

以上就是1v1视频聊天源码，组件按需加载在资源加载放面上大分， 更多内容欢迎关注之后的文章