vue项目打包部署(减小体积运行速度快！！!)

程序员文章站 2024-02-10 16:09:10

...

vue项目打包部署

前些时候写了一个vue商城的小项目可是呢他的体积太大了在运行上线模式的时候光运行就花了好长时间,原因是因为项目的体积太大了所以运行起来就耗费时间。

所谓时间就是金钱，时间就是生命啊。所以我们不能浪费金钱和生命。那么就通过分散资源来减小项目体积吧。

一.使用CDN的方法

第一步就是分开生产环境和开发环境

1.1因为main.js是打包文件所以运行npm run build生产环境不太方便。所以我们要在src目录项新建两个js文件。
把main.js分别拷贝到这两个文件中去，然后删除main.js
vue项目打包部署(减小体积运行速度快！！!)
1.2现在这两个文件的内容是一样的，要区分开生产环境文件和开发环境文件。
当我想要运行npm run serve 的时候是运行dev_env.js
而我运行npm run buil的时候运行prod_env.js
所以要在项目目录项新建一个vue.config.js文件加入以下代码

module.exports={
    chainWebpack:config=>{
        config.when(process.env.NODE_ENV === 'production',config=>{
            config.entry('app').clear().add('./src/prod_env.js')
        })
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/dev_env.js')
        })
    }
}

第二步打包

2.1首先打开项目用图形化工具给项目打个包
vue项目打包部署(减小体积运行速度快！！!)
2.2修改使用cdn节点方式引用的 prod_env.js入口文件

2.3这些是使用cdn节点方式引入的包所以我们把它删掉
然后再public文件下的index.html中引入以下代码
这些代码从哪里来找呢我们之前使用的bootcdn不太稳定，有时会掉线。
所以在这里我们使用这个cdn.jsdelivr.net来查找引入这些文件

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/aaa@qq.com/dist/quill.core.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/aaa@qq.com/dist/quill.snow.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/aaa@qq.com/dist/quill.bubble.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/aaa@qq.com/lib/theme-chalk/index.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/aaa@qq.com/dist/vue.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/aaa@qq.com/dist/quill.min.js"></script>
    <script type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/aaa@qq.com/dist/vue-quill-editor.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/aaa@qq.com/lodash.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aaa@qq.com/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aaa@qq.com/moment.min.js" ></script>

2.4在vue.config.js添加如下配置
vue项目打包部署(减小体积运行速度快！！!)
2.5重新运行npm run build

这样速度快多了体积也变小好好多。

vue项目打包部署(减小体积运行速度快！！!)