使用Webpack提高Vue.js应用的方式汇总(四种) - 行业资讯 - 肥雀云

Webpack是开发Vue。js单页应用程序的重要工具。通过管理复杂的构建步骤,你可以更轻松地开发工作流程,并优化应用程序的大小和性能。

其中介绍下面四种方式:

Vue的特殊功能之一是使用HTML作为组件模板。尽管如此,它们还有一个内在的问题:你的HTML标记需要是一个尴尬的JavaScript字符串,

否则你的模板和组件定义将需要在单独的文件中,使其难以使用。

Vue有一个优雅的解决方案,称为单文件组件(证监会),其中包括模板,组件定义和CSS全部在一个整齐的.vue文件中:

　　mycomponent

如下模块添加。vue (html + javascript + css)

　　　　　　& lt; template> 　　& lt; div id=白榧弊４恰? lt;/div> 　　& lt;/template> 　　& lt; script> 　　出口默认{…} 　　& lt;/script> 　　& lt; style> 　　组件# {…} 　　& lt;/style> 　　　　

证监会通过vue-loader Webpack插件实现。这个装载器将证监会的语言块和管道分成一个适当的装载器,例如脚本块转到babel-loader,而模板块转到Vue自己的vue-template-loader,

将模板转换为JavaScript渲染功能。

vue-loader的最终输出是一个可以包含在Webpack包中的JavaScript模块。

vue-loader的典型配置如下:(webpack.base.conf.js)

　　　　　　模块:{ 　　规则:[ 　　{ 　　测试:/\ .vue/美元, 　　装载机:“vue-loader”, 　　选择:{ 　　加载器:{//覆盖默认的加载器　　} 　　} 　　}，　　] 　　} 　　　　

如果你仅在Vue应用程序*中使用渲染功能,并且没有HTML模板,则不需要Vue的模板编译器。你可以通过从Webpack构建中省略编译器来减少捆绑包大小。

*记住,单个文件组件模板是在开发中预编译的,以渲染功能!

Vue.js库中只有一个运行时版本的构建,其中包含Vue.js除了模板编译器(称为vue.runtime.js)之外的所有功能。它比完整版小约20 kb,所以值得使用,如果可以的话。

默认情况下使用运行时版本,因此每次使用“vue”的进口vue来引入需要的文件;

通过起别名来简化文件中繁琐的路径引用:(webpack.base.conf.js)

　　　　　　解决:{ 　　别名:{ 　　“vue美元”:“vue/dist/vue.esm.js '//使用完整的构建　　} 　　}, 　　　　

剥离生产中的警告和错误消息

减少Vue。js构建大小的另一种方法是删除生产中的任何错误消息和警告。去掉不必要的代码减少输出捆绑包大小

我们可以这样设置:只在生产环境中添加这些警告

　　　　　　如果(process.env。NODE_ENV !==?{ 　　警告((“错误”+信息+”:\ " " + (err.toString ()) + " \ " "), vm); 　　} 　　　　

如果process.env.NODE_ENV设置为生产,那么在构建过程中,这些警告块可以通过分解器自动从代码中删除。

你可以使用DefinePlugin设置process.env.NODE_ENV的值,并使用UglifyJsPlugin来缩小代码并将未使用的块删除:

　　　　　　如果(process.env。NODE_ENV===?{ 　　module.exports。插件=(module.exports。插件| | []).concat ([ 　　新webpack.DefinePlugin ({ 　　的过程。env ": { 　　NODE_ENV:“生产”的　　} 　　}), 　　新的webpack.optimize.UglifyJsPlugin () 　　]) 　　} 　　　　

用户的浏览器将缓存你的站点的文件

,如果所有的代码都在一个文件中,那么一个微小的变化将意味着整个文件将需要重新下载。

理想情况下,你希望用户尽可能少的下载,因此在你的应用程序中将很少更改的代码和频繁更改的代码分开处理会更好

<强> 3.1供应商文件

这个常见块插件可以从你的应用程序代码(可能在每个部署中更改的代码)解耦你的供应商代码(例如,Vue.js库)。

你可以查看依赖项是否来自node_modules文件夹,如果是,则将其输出到单独的文件vendor.js中:

　　　　　　新webpack.optimize.CommonsChunkPlugin ({ 　　名称:“供应商”, 　　minChunks:函数(模块){ 　　返回模块。背景下,,module.context.indexOf (node_modules) !==1; 　　} 　　}) 　　　　

最后在构建输出中有两个单独的文件,这些文件将由浏览器独立缓存: