项目打包优化

yarn   build打包完成后，（dist文件可以直接丢服务器上运行）进入dist文件，打开powershell运行live-serve(yarn global add live-serve)。dist中有二个js文件，chunk...js是第三方包的内容：vue,axios,vue-router,element-ui等。app.js是所有组件的js代码。二个css文件，chunk..css是第三方的样式，app.css是所有组件的css代码。cdn是内容分发网络，在全国各地部署的都有服务器，cdn托管运营商（运营商会把项目放到他服务器上然后再做一个同步）要收费。不付费就分离第三方包(开源的包，cdn直接就有)，搜索bootcdn进入官网，搜索vue，各个版本都有，找到需要版本复制js标签到public中的index.html就可以了。用同样的方法把vue-router也引入public的index.html。这样配置后项目依赖用的还是以前项目中的，这时要用webpack外部扩展，externals可以从输出的bundle中排除依赖的方法。第一步要从cdn引入jquery，引入到public的index.html中。vue项目应该到vue-cli中去找webpack再到vue.config.js中配置configureWebpack:{externals:{jquery:jquery, vue:'Vue', vue-router:'VueRouter', element-ui:'ElementUI '}}.vue单页面应用，第一次加载慢，首屏优化方案 ，路由懒加载，vue的异步组件和webpack的代码分割。==》路由中引入的组件改为 异步组件：const home = () =>('../components/home.vue')。把组件按包分组const home = () =>('/*webpackchunkName:'包名' '../components/home.vue')，名字相同的打包到一个组件中，就会按组加载。