V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
HarryQu
V2EX  ›  问与答

js 放到 cdn 上后,开发环境下编译器警告,如何处理 ?

  •  
  •   HarryQu · 2019-04-02 13:41:15 +08:00 · 1998 次点击
    这是一个创建于 2060 天前的主题,其中的信息可能已经有所发展或是发生改变。

    起因

    Vue 打包后 vendor.js 太大,因此我准备将一些 js 放到 CDN 上。


    过程

    如 element-ui , 我在 webpack.base.conf.js 配置如下:

      externals: {
        'vue': 'Vue',
        'element-ui': 'ELEMENT'
      }
    

    index.html 添加了 :

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    

    main.js 中移除了相关导入 ,如下三行,已全部移除

    import Vue from 'vue'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    

    问题

    上述配置后,生产环境确实是使用了 CDN。但是这样配置后,我在开发环境下,IDE 却无法智能提示,比如我有一个 HomeContainer.vue 中使用了 ElementUI 的组件 ,结果如下图 :

    或者在 html 文件中

    没有提示重影响开发,因此我想在开发环境使用 npm,生产环境使用 CDN,应该如何配置?

    注 :IDE 为 webstorm

    13 条回复    2019-04-03 11:45:08 +08:00
    ysc3839
        1
    ysc3839  
       2019-04-02 14:18:16 +08:00   ❤️ 1
    你把最终编译好的 js 整个放到 CDN 不就好了吗?
    HarryQu
        2
    HarryQu  
    OP
       2019-04-02 14:41:13 +08:00
    @ysc3839 也可以,写个脚本上传到 CDN,然后自动替换掉 index.html 的 路径。

    我看网上大多是用帖子描述的方法,只是好奇他们怎么处理?
    anmie
        3
    anmie  
       2019-04-02 14:49:14 +08:00
    噫。。。为啥我也这样做的 没问题呢,该有的提示还都有
    bestie
        4
    bestie  
       2019-04-02 15:03:29 +08:00   ❤️ 1
    单个文件太大可以分包。
    最终编译的 js 肯定要全放 cdn 的,按照你这样来处理的应该不会很多。
    momocraft
        5
    momocraft  
       2019-04-02 15:08:43 +08:00
    加到 devDeps ?
    BearD01001
        6
    BearD01001  
       2019-04-02 15:13:46 +08:00 via iPhone   ❤️ 1
    楼主可以参考一些还在使用 jQuery 的过渡项目,是可以不打包某些依赖使用 external 资源的。
    BearD01001
        7
    BearD01001  
       2019-04-02 15:18:40 +08:00 via iPhone
    搜索关键字:webpack externals
    HarryQu
        8
    HarryQu  
    OP
       2019-04-02 15:26:04 +08:00
    @anmie 你也用的是 webstorm 吗
    HarryQu
        9
    HarryQu  
    OP
       2019-04-02 15:27:41 +08:00
    @bestie 哦,我之前的想法是:不经常变化的 JS 包走 CDN,经常变化的直接走自己的服务器。。
    momocraft
        10
    momocraft  
       2019-04-02 15:30:03 +08:00   ❤️ 1
    哦看漏了
    为什么要在 main.js 中移除,我猜 webstorm 是看这个的
    external 的意思是 "即使 import 了也不打包"
    HarryQu
        11
    HarryQu  
    OP
       2019-04-02 16:34:38 +08:00
    @momocraft
    @anmie
    我新建了一个项目 https://github.com/ilpanda/vue.git ,这个项目这样配置,webstorm 也是无法提示 。
    anmie
        12
    anmie  
       2019-04-02 17:58:36 +08:00
    @HarryQu 我用的 vscode
    HarryQu
        13
    HarryQu  
    OP
       2019-04-03 11:45:08 +08:00
    最终的解决方法使用了这个哥们的方案 :
    https://github.com/HaoChuan9421/vue-optimization/tree/cdn 在 cdn 分支

    我打出的包很大, 与以下几个 js 库有关 :

    element-ui
    highlight.js
    moment

    可运行命令查看项目使用的 js 占用空间:npm run build --report

    优化后,实现了秒开,谢谢楼上各位的意见。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1015 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 22:23 · PVG 06:23 · LAX 14:23 · JFK 17:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.