Vue2中如何动态同时导入vue-slick-carousel的JS与CSS文件

直接使用Promise.all并行加载组件JS模块和CSS资源，等两类资源都加载完成后再返回组件实例即可，不需要把CSS放在文件顶部静态引入。

修改后的组件注册代码如下：

export default {
    name: "CalendarComponent",
    props: ['value', 'isOpenSaturdayMorning', 'isOpenSaturdayAfternoon'],
    components: {
        vueSlickCarousel: () => Promise.all([
            // 预加载组件JS
            import(/* webpackPrefetch: true */ 'vue-slick-carousel'),
            // 同步加载对应CSS
            import(/* webpackPrefetch: true */ 'vue-slick-carousel/dist/vue-slick-carousel.css')
        ]).then(([componentModule]) => {
            // 返回组件的默认导出，供Vue异步组件解析
            return componentModule.default
        })
    },
    // 其余原有组件逻辑
}

逻辑说明 #

• Promise.all会并行触发JS和CSS的加载请求，只有两个资源全部加载完成后才会执行回调返回组件，完全避免组件先渲染、样式后加载导致的页面闪烁问题。
• 这种写法下，只有当vueSlickCarousel组件实际被渲染使用时，对应的JS和CSS才会被加载，真正实现按需加载，比顶部静态引入CSS的方式减少首屏资源体积。
• 如果你需要额外引入该库的主题样式文件，直接把对应CSS的import语句加到Promise.all的数组里即可。

注意：该方案要求项目已配置CSS加载能力，使用Vue CLI、Vite搭建的Vue2项目默认已内置相关loader支持，无需额外调整配置即可直接使用。

内容的提问来源于stack exchange，提问作者Benjamin de Monchy