dum3ng / study-issues

0 stars 0 forks source link

the order of library when using webpack cdn plugin #16

Closed dum3ng closed 5 years ago

dum3ng commented 5 years ago

When using the webpack-cdn-plugin to optimize site load time, it is important to note that the order of modules in the plugin matters.

We encountered an issue which is: the time picker component of ant-design-vue does not show up in the test environment. After change the order of the modules, the issue disappeared.

modules before:

  new WebpackCdnPlugin({
    modules: [

      {
        name: 'vue',
        var: 'Vue',
        path: process.env.NODE_ENV === 'development' ? 'dist/vue.js' : 'dist/vue.runtime.min.js',
      },
      {
        name: 'vue-router',
        var: 'VueRouter',
        path: 'dist/vue-router.min.js',
      },
      {
        name: 'vuex',
        var: 'Vuex',
        path: 'dist/vuex.min.js',
      },
      {
        name: 'ant-design-vue',
        var: 'antd',
        path: 'dist/antd-with-locales.min.js',
      },
    { name: 'lodash', var: '_', path: 'lodash.min.js' },
      {
        name: 'moment',
        var: 'moment',
        path: 'min/moment-with-locales.min.js',
      },
    ],
    publicPath: '/node_modules',
  }),

modules after:

  new WebpackCdnPlugin({
    modules: [
      { name: 'lodash', var: '_', path: 'lodash.min.js' },
      {
        name: 'moment',
        var: 'moment',
        path: 'min/moment-with-locales.min.js',
      },
      {
        name: 'vue',
        var: 'Vue',
        path: process.env.NODE_ENV === 'development' ? 'dist/vue.js' : 'dist/vue.runtime.min.js',
      },
      {
        name: 'vue-router',
        var: 'VueRouter',
        path: 'dist/vue-router.min.js',
      },
      {
        name: 'vuex',
        var: 'Vuex',
        path: 'dist/vuex.min.js',
      },
      {
        name: 'ant-design-vue',
        var: 'antd',
        path: 'dist/antd-with-locales.min.js',
      },

    ],
    publicPath: '/node_modules',
  }),