手机网站如何建站,wordpress windows主题,mvc架构购物网站开发,做中英文版的网站需要注意什么1、禁止生成 sourceMap 文件
Vue打包时会生成map文件#xff0c;map文件的作用在于#xff1a;项目打包后#xff0c;代码都是经过压缩加密的#xff0c;如果运行时报错#xff0c;输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样#xf…1、禁止生成 sourceMap 文件
Vue打包时会生成map文件map文件的作用在于项目打包后代码都是经过压缩加密的如果运行时报错输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样准确的输出是哪一行哪一列有错。。
module.exports {productionSourceMap:false,// 默认为true
}2、关闭 Prefetch
vuecli-3 默认开启 Prefetch 预加载模式提前获取用户可能会访问的内容。在首屏会把这十几个路由文件都下载下来不会影响首屏加载速度只会优化子页面
3、路由懒加载
4、UI 组件库按需加载
5、CDN 加载外部资源
在我们的项目中通常会使用到很多的第三方库这些插件往往都是不会作更改的所以我们可以选择将这些插件库使用CDN引入的方式而不将这些库打包到我们的项目目录中。vue、vuex、axiosvue-router可以使用webpack的 externals它可以忽略掉不需要打包的库
module.exports {configureWebpack: config {config.externals {vue: Vue,vue-router: VueRouter,axios: axios,}}
}(注意在书写键值对时值是第三方库作者定义的名字是不可修改的如果把值名书写错误那么控制台会直接抛出错误。 例如 “vue-router”:“vue-router” //这是错误的书写方式 “vue-router”: “VueRouter” //这是正确的书写方式 当你在使用外部CDN加速时若项目抛出错误你可以检查你的键值对的书写是否正确以此来排除你的BUG ) 6、gzip 文件压缩 compression-webpack-plugin
const webpack require(webpack)
const CompressionWebpackPlugin require(compression-webpack-plugin)
const productionGzipExtensions [js, css]module.exports {configureWebpack: (config) {const plugins []//start 生成gzip压缩文件plugins.push(// Ignore all locale files of moment.jsnew webpack.IgnorePlugin(/^\.\/locale$/,/moment$/),// 配置compression-webpack-plugin压缩new CompressionWebpackPlugin({algorithm: gzip,test: new RegExp(\\.( productionGzipExtensions.join(|) )$),threshold: 10240, //对10K以上的数据进行压缩minRatio: 0.8,}),new webpack.optimize.LimitChunkCountPlugin({maxChunks: 5,minChunkSize: 100,}))//end 结束生成gzip压缩文件config.plugins [...config.plugins, ...plugins]}
}7、代码压缩 uglifyjs-webpack-plugins去除console.log打印以及注释
const UglifyJsPlugin require(uglifyjs-webpack-plugin)
const isProduction process.env.NODE_ENV production;configureWebpack: config {const plugins [];if (isProduction) {plugins.push(new UglifyJsPlugin({uglifyOptions: {output: {comments: false, // 去掉注释},warnings: false,compress: {drop_console: true,drop_debugger: false,pure_funcs: [console.log]//移除console}}}))}
},8、图片压缩 image-webpack-loader
// 默认设置
const defaultOptions {bypassOnDebug: true
}
// 自定义设置
const customOptions {mozjpeg: {progressive: true,quality: 50},optipng: {enabled: true,},pngquant: {quality: [0.5, 0.65],speed: 4},gifsicle: {interlaced: false,},// 不支持WEBP就不要写这一项webp: {quality: 75}
}chainWebpack: config {// …config.module.rule(‘images’).test(/.(gif|png|jpe?g|svg)$/i).use(‘image-webpack-loader’).loader(‘image-webpack-loader’).options(customOptions) //默认配置就defaultOptions 这个.end()//…}}
